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 BreadcrumbItem per level containing a BreadcrumbButton.
  • Separate items with BreadcrumbDivider.
  • Mark the current page with current=true on the final BreadcrumbButton.
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.

Theme button tokens

Breadcrumb buttons use subtle background tokens from the Orbital theme provider.