Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Overview

Home / Components / Breadcrumb —— link 可点击，末级 Page 是纯文本。

GPUI · Live previewGPUI WASM

Installation

Breadcrumb 是单个 Rust 文件（src/breadcrumb.rs），只依赖 gpui-kit —— chevron / slash / dot 分隔符全部 PathBuilder 手绘。

Cargo.toml

1[dependencies]2gpui-kit = "0.6.6"34# breadcrumb.rs is self-contained — separators are5# painted with PathBuilder, no extra deps.

Download runnable example

Terminal

1# Download the runnable example crate, then:2cargo run --locked -- --breadcrumb34# Other demos:5cargo run --locked -- --breadcrumb separator6cargo run --locked -- --breadcrumb collapsed7cargo run --locked -- --breadcrumb link8cargo run --locked -- --breadcrumb rtl

Usage

Breadcrumb 是实体（cx.new），CrumbItem 描述每条：Link 可点、Page 是纯文本、Ellipsis 表示折叠的中间层级。

Example.rs

1use justdo_command::breadcrumb::{Breadcrumb, CrumbItem, CrumbSeparator};23// Breadcrumb is an entity — create it on your view, render as4// a child, subscribe for BreadcrumbNavigateEvent.5let breadcrumb = cx.new(|_| {6    Breadcrumb::new()7        .items(vec![8            CrumbItem::link("Home"),9            CrumbItem::link("Components"),10            CrumbItem::page("Breadcrumb"),11        ])12        .separator(CrumbSeparator::Chevron)13});14div().child(breadcrumb)

网页预览与桌面端运行同一份 Rust / GPUI 组件。

Composition

组合结构对齐 shadcn/ui 的 Breadcrumb / BreadcrumbList / Item / Link / Separator / Page / Ellipsis。

Structure

1Breadcrumb                entity — renders the trail, emits BreadcrumbNavigateEvent2└── BreadcrumbList        flex row of items + separators3    ├── BreadcrumbItem    CrumbItem::Link(..) — clickable ancestor link4    ├── BreadcrumbSeparator  Chevron | Slash | Dot (mirrored in RTL)5    ├── BreadcrumbItem    CrumbItem::Ellipsis — collapsed "More"6    └── BreadcrumbItem    CrumbItem::Page(..) — current page, plain text

Example.rs

1// Links and the ellipsis emit BreadcrumbNavigateEvent;2// the trailing Page crumb is text only (aria-current="page").3cx.subscribe(&breadcrumb, |demo, _, event, cx| {4    demo.navigate(event.label.clone());5    cx.notify();6});

Notes

Hit testing. 每条 link / ellipsis 是带 .id() 的独立元素 —— hover 变色、Tab 聚焦、focus-visible 描边都由 GPUI 命中测试驱动，不用自己算区域。

RTL. .rtl(true) 反转条目顺序并把 chevron 画成左向 —— 分隔符镜像逻辑在 chevron(color, mirrored) 里。

Accessibility

Current page

末级 crumb 渲染为纯文本（对应 BreadcrumbPage / aria-current="page"），不进入 Tab 顺序，点击无效果。

Keyboard

每条 link 与 ellipsis 可通过 Tab 聚焦，focus-visible 描边反馈；链接 hover 加深，不只依赖颜色表达可交互。

API Reference

实体暴露的 builder 方法、条目类型与事件。

API	Signature	Notes
`Breadcrumb::new()`	`-> Breadcrumb`	Default Home / Components / Breadcrumb trail.
`.items(..)`	`Vec<CrumbItem>`	Ordered crumbs; last should usually be Page.
`CrumbItem::link(..)`	`impl Into<SharedString>`	Clickable ancestor — BreadcrumbLink.
`CrumbItem::page(..)`	`impl Into<SharedString>`	Current page text — BreadcrumbPage.
`CrumbItem::Ellipsis`	`-`	Collapsed "…" marker — BreadcrumbEllipsis, pressable.
`.separator(..)`	`CrumbSeparator`	Chevron \| Slash \| Dot between crumbs.
`.rtl(..)`	`bool`	Reverse order + mirrored chevrons for RTL locales.
`BreadcrumbNavigateEvent`	`{ label }`	Emitted by link/ellipsis press; subscribe via cx.subscribe.

Source & inspiration

结构与视觉参考 shadcn/ui Breadcrumb 。本页交互由 Rust / GPUI 绘制，基础样式来自 gpui-kit 。