Breadcrumb
Path to the current page as a trail of links.
Master
Switch separator and trail. The current page is never a link. The ellipsis is visual only.
Usage
Use Breadcrumb above a page title to show where the page sits in the app. The last crumb is the current page and is never a link. Slash is the default separator; chevron is the alternate. Long trails collapse with maxItems. See contracts/breadcrumb.json for the full contract.
Do's
- Show where a page sits in the app, above its title.
- Detail pages inside a list, like Invoices / INV-1042.
- An app screen's trail: Home, the side-nav section, then the current page. Above a page title, pass the trail through PageHeader, which adds the title as the current crumb.
Don'ts
- Do not invent a local Breadcrumb, BreadcrumbItem or BreadcrumbLink.
- Do not make the current page a link.
- Do not use Breadcrumb as the sidebar or as tabs.
- Do not put a menu on the ellipsis. It is visual only.
- Do not mix separators in one app.
- Do not use raw hex.
<Breadcrumb
separator="slash"
items={[
{ label: "Home", href: "#" },
{ label: "Invoices", href: "#" },
{ label: "INV-1042" },
]}
/>