Breadcrumb

Breadcrumb — a navigational trail with automatic overflow into a … menu.

Public types

Public functions

Breadcrumb

BreadcrumbItem

Detailed description

Breadcrumb renders a horizontal row of labelled segments separated by chevron glyphs, representing a hierarchical path (file system, settings hierarchy, wizard steps, etc.). When the trail is too wide to fit its container, middle segments are automatically collapsed into a … popover menu — the root and the current (last) segment always stay visible, matching Windows Explorer, macOS path bar, and web breadcrumb conventions.

Building a trail

#![allow(unused)]
fn main() {
use teksilo_widgets::{Breadcrumb, BreadcrumbItem};
use teksilo_core::Intent;
use teksilo_i18n::lit;
let _bc = Breadcrumb::new()
    .item(BreadcrumbItem::new(lit!("Home"))
        .on_activate_fn(|ctx| ctx.send_intent(Intent::new("app.nav.home"))))
    .item(BreadcrumbItem::new(lit!("Projects"))
        .on_activate_fn(|ctx| ctx.send_intent(Intent::new("app.nav.projects"))))
    .item(BreadcrumbItem::current(lit!("Teksilo")));
}

Accessibility

The container uses Role::Navigation; each segment uses Role::Link. The current crumb sets aria-current="page". The decorative separator chevrons are hidden from the AT tree. The … overflow button declares HasPopup::Menu.

Touch and pen

A crumb navigates on the release. It is as wide as its label, so a short one ("A / B / C", a drive letter) can land under the 24 dp target floor; it declares a Widget::hit_outset that makes the shortfall up between the pointer and the arena, so the trail's own geometry never moves. The current crumb and a trail with no navigation action declare none — a widened node that then refuses the press is a hole in whatever is behind it.

Density

The picture above is the widget at TargetDensity::Compact, the mouse-and-keyboard ladder. Below is the same subject on the same canvas with only the ladder changed, so what moves is the density and nothing else — where the subject no longer fits, that is what the denser targets cost it at that size. See docs/density-and-targets.md.

Touch

API reference

📖 Full rustdoc API for this module

pub const BREADCRUMB_ITEM_HEIGHT

Import: use teksilo::widgets::breadcrumb::BREADCRUMB_ITEM_HEIGHT;

Minimum height of a single breadcrumb segment in logical pixels.

#![allow(unused)]
fn main() {
pub const BREADCRUMB_ITEM_HEIGHT: f32 = 20.0;
}

pub const BREADCRUMB_ITEM_PADDING_HORIZONTAL

Import: use teksilo::widgets::breadcrumb::BREADCRUMB_ITEM_PADDING_HORIZONTAL;

Horizontal inner padding of each segment pill in logical pixels.

#![allow(unused)]
fn main() {
pub const BREADCRUMB_ITEM_PADDING_HORIZONTAL: f32 = 6.0;
}

pub fn breadcrumb_item_padding_horizontal(...)

Import: use teksilo::widgets::breadcrumb::breadcrumb_item_padding_horizontal;

BREADCRUMB_ITEM_PADDING_HORIZONTAL scaled by the density's spacing_factor (1.00 / 1.15 / 1.30).

#![allow(unused)]
fn main() {
pub fn breadcrumb_item_padding_horizontal(tokens: &InputTokens) -> f32;
}

pub const BREADCRUMB_SEPARATOR_GAP

Import: use teksilo::widgets::breadcrumb::BREADCRUMB_SEPARATOR_GAP;

Gap reserved for the chevron separator between adjacent segments.

#![allow(unused)]
fn main() {
pub const BREADCRUMB_SEPARATOR_GAP: f32 = 4.0;
}

pub fn breadcrumb_separator_gap(...)

Import: use teksilo::widgets::breadcrumb::breadcrumb_separator_gap;

BREADCRUMB_SEPARATOR_GAP scaled by the density's spacing_factor (1.00 / 1.15 / 1.30).

#![allow(unused)]
fn main() {
pub fn breadcrumb_separator_gap(tokens: &InputTokens) -> f32;
}

pub const BREADCRUMB_CORNER_RADIUS

Import: use teksilo::widgets::breadcrumb::BREADCRUMB_CORNER_RADIUS;

Corner radius of the interactive segment hover/focus rectangle.

#![allow(unused)]
fn main() {
pub const BREADCRUMB_CORNER_RADIUS: f32 = 4.0;
}

pub struct BreadcrumbItem

Import: use teksilo::widgets::BreadcrumbItem;

A single breadcrumb segment definition.

#![allow(unused)]
fn main() {
pub struct BreadcrumbItem { /* fields */ }
}

Methods

pub fn new(label: impl Into<LocalizedString>) -> Self

Construct a non-current (navigable) breadcrumb segment.

pub fn current(label: impl Into<LocalizedString>) -> Self

Construct the current (last) breadcrumb segment, announced with aria-current="page". Current segments are never collapsed into the overflow … menu.

pub fn on_activate_fn(mut self, f: impl Fn(&mut EventContext) + 'static) -> Self

Closure invoked on activation.

pub fn tooltip(mut self, text: impl Into<LocalizedString>) -> Self

Attach a plain single-line tooltip to this breadcrumb segment, shown after a hover delay. Clears any previously set rich or composite tooltip.

pub fn rich_tooltip(mut self, key: impl Into<String>) -> Self

Attach a rich tooltip to this breadcrumb segment, looked up by registry key. Clears any previously set plain or composite tooltip.

pub fn rich_tooltip_content(mut self, content: crate::tooltip::TooltipContent) -> Self

Attach a rich tooltip to this breadcrumb segment from inline content. Clears any previously set plain or composite tooltip.

pub fn composite_tooltip(mut self, content: impl Widget + 'static) -> Self

Attach a composite tooltip (arbitrary widget tree) to this breadcrumb segment. Clears any previously set plain or rich tooltip.

pub struct Breadcrumb

Import: use teksilo::widgets::Breadcrumb;

A breadcrumb navigation row with automatic overflow: when the trail is too wide, the middle crumbs collapse into a trailing-of-root … menu while the root and the current (last) crumb stay visible — the standard breadcrumb collapse (Windows Explorer / web breadcrumbs / macOS path bar).

#![allow(unused)]
fn main() {
pub struct Breadcrumb { /* fields */ }
}

Methods

pub fn new() -> Self

Construct an empty breadcrumb trail. Add segments with item and item_id.

pub fn label(mut self, text: impl Into<LocalizedString>) -> Self

Accessible name for the Navigation landmark — distinguishes this breadcrumb from other nav landmarks on the page (e.g. "Files", "Settings"). Screen readers announce it as the name of the landmark when it gains focus or is summoned.

pub fn item(mut self, item: BreadcrumbItem) -> Self

Append a BreadcrumbItem segment to the trail. Items are rendered in insertion order, separated by chevron glyphs. Middle items (neither root nor current) may be collapsed into the … overflow menu.

pub fn items(self, items: impl IntoIterator<Item = BreadcrumbItem>) -> Self

Append several BreadcrumbItem segments from an iterator, in order.

The loop form of item, and the usual one: a trail is normally walked out of a path rather than written crumb by crumb.

pub fn item_id(mut self, id: WidgetId) -> Self

Insert a pre-registered widget as a breadcrumb segment slot. The caller is responsible for the segment's visual + interaction. Note: a pre-registered crumb never collapses into the overflow menu (the breadcrumb has no label/action to synthesize a menu row from) — it is treated like the root/current crumbs as always-visible.

pub fn item_ids(self, ids: impl IntoIterator<Item = WidgetId>) -> Self

Insert several pre-registered widgets as breadcrumb segment slots.

The id-carrying twin of items. Like item_id, none of these crumbs ever collapses into the overflow menu.

pub fn trailing_slot(mut self, widget: impl teksilo_core::IntoTeksiChild) -> Self

Append a trailing widget after all segments, pushed to the far edge by an intervening Spacer. Common uses: a search icon, refresh button, or current-path copy button. When a trailing slot is set, the breadcrumb spans the full proposed width.

pub fn is_overflowing(&self) -> Signal<bool>

Reactive signal that is true whenever any crumb is collapsed into the overflow … menu — for adaptive chrome.