Breadcrumb
The trail to the current page, with a collapsing middle
Installation
npx shadcn@latest add @sudokw/components-breadcrumbimport { Breadcrumb } from "@gpuixui/components";Usage
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@gpuixui/components/breadcrumb";
<Breadcrumb maxItems={4}>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink onSelect={() => go("Projects")}>Projects</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink onSelect={() => go("GPUIXUI")}>GPUIXUI</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>breadcrumb.tsx</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>;Composition
Breadcrumb
└── BreadcrumbList
└── BreadcrumbItem
├── BreadcrumbLink
├── BreadcrumbPage
└── BreadcrumbSeparatorAPI reference
| Part | Prop | Type | Default | Consequence |
|---|---|---|---|---|
Breadcrumb | maxItems | number | — | rendered entries to keep; below 3 is clamped to 3, absent means no collapse |
Breadcrumb | separator | ReactNode | / | the glyph between entries; a node, so a chevron works |
Breadcrumb | children | parts | — | BreadcrumbList |
BreadcrumbList | children | parts | — | the items and any authored separators |
BreadcrumbItem | children | parts | — | BreadcrumbLink or BreadcrumbPage |
BreadcrumbLink | onSelect | () => void | — | runs on click, Enter or Space |
BreadcrumbLink | current | boolean | false | renders the current page instead of a link |
BreadcrumbPage | children | text | — | the current page; not focusable |
BreadcrumbSeparator | children | text | / | the default glyph when none is authored |
| all parts | className | string | — | an extra recipe class, joined last |
Keyboard
- EnterSpace
- follows the focused crumb
read from breadcrumb.tsx
Edit this page on GitHubapps/docs/content/docs/components/breadcrumb.mdx