Breadcrumbs
Overview
Usage
Examples
API
Breadcrumbs show where the current page sits in the site hierarchy and offer one-click steps back up it. <rhombus-breadcrumbs> is a bespoke, accessible trail — it wraps no Material primitive — driven by an items array, with all colour flowing through the token contract.
Example
When to use
- Use breadcrumbs for deep, hierarchical pages so users can see and jump up the path.
- When the trail is short or the destinations are equally important ancestors, breadcrumbs keep the path lightweight and scannable without stealing focus from the page content.
When not to use
- For switching between peer views of one page, use Tabs — breadcrumbs imply a parent-child hierarchy, not siblings.
- For paging through a long list of records, use Pagination.
- For a fixed app-wide navigation rail, use the App Shell or Bottom Nav instead.
Related components
- Tabs — switch between peer views of a single page.
- Page Header — a common host for a breadcrumb trail.
- Pagination — step through sequential pages of data.
Was this page helpful?