Breadcrumb
Displays the path to the current page using a hierarchy of links.
Import
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator,
BreadcrumbPage,
} from "@retents/ui/breadcrumb"Usage Guidelines
When to use
- To show the user's current location within a hierarchical site structure (e.g., Home > Products > Details).
- On pages that are 2+ levels deep in the site hierarchy.
- When users may need to navigate back to a parent section.
When NOT to use
- For primary site navigation — use NavigationMenu instead.
- On single-level pages or landing pages where there's no hierarchy.
- For step-by-step wizards — use a stepper pattern instead.
Accessibility
The Breadcrumb uses a nav element with aria-label="breadcrumb" automatically. The current page uses aria-current="page" via BreadcrumbPage.
Preview
Usage
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Current Page</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>