Breadcrumb
A labeled hierarchy of native ancestor links ending in the current page.@gemologic/sheen · navigationPlayground
This example has no scalar controls. Its validated source remains interactive below.
<Breadcrumb items={[{ id: "workspace", label: "Workspace", href: "/" }, { id: "settings", label: "Settings" }]} />Variant matrix
Workspace path
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Breadcrumb.tsx- Tokens
--sheen-color-fg--sheen-color-fg-muted--sheen-space-inline-sm--sheen-color-focus-ring
Accessibility
Role: navigationKeyboard: Tab, Shift+Tab, EnterDo
- Use real URLs so links support normal browser navigation and opening in another tab.
- Keep IDs stable when labels refresh.
Do not
- Do not use breadcrumbs for action buttons or tab selection.
- Do not hide the current page or truncate away its accessible name.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
items * | readonly BreadcrumbEntry[] | — | Nonempty ordered path with stable unique IDs and nonempty labels. Ancestors require href; the final item renders as current-page text. |
label | string | — | Navigation landmark label, defaulting to the scoped breadcrumb message. |