Breadcrumb
Hierarchical navigation that shows the current page within a larger structure.
Examples
Page trail
Overview
Build an ordered trail with links, separators, and a final BreadcrumbPage marked as current.
tsx
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbPage } from "@standard-ui/react" <Breadcrumb> <BreadcrumbList> <BreadcrumbItem><BreadcrumbPage>Settings</BreadcrumbPage></BreadcrumbItem> </BreadcrumbList> </Breadcrumb>
API
| Part | Role |
|---|---|
| Breadcrumb | Navigation landmark. |
| BreadcrumbLink | Ancestor page link. |
| BreadcrumbPage | Current page label. |
Guidelines
Do
- Keep labels short and recognizable
Don't
- Don't link the current page