Breadcrumb
Shows where the user is in a hierarchy.
Add BreadcrumbItem segments separated by BreadcrumbDivider, and set current=true on the last BreadcrumbButton for the active page. Keep trails shallow — deep-path collapse is not implemented yet.
- Page hierarchy navigation in settings, admin, and nested routes
- Showing the user's current location within a shallow site structure
- Pairing with Link for hybrid button and anchor items
- Wrap the trail in
Breadcrumb. - Add a
BreadcrumbItemper level containing aBreadcrumbButton. - Separate items with
BreadcrumbDivider. - Mark the current page with
current=trueon the finalBreadcrumbButton.
Basic trail
Default two-level trail with a current page marker on the last item.
Current page
The current item is styled differently and exposes aria-current="page".
Long trail
Multi-level trails show deeper hierarchy with dividers between each segment.