NAVIGATION / COMPONENTS
Breadcrumbs
Show location within a hierarchy.
About breadcrumbs
Breadcrumbs are a navigation aid that display a hierarchical trail of links, helping users understand their current location within a website and facilitating easy navigation to previous pages or higher levels in the site's structure. They enhance user experience by providing context and simplifying website navigation.
Anatomy
Shared parts, named consistently.
- 1BreadcrumbsRequired
The parent container for multiple Breadcrumb Items.
- 2Breadcrumbs ItemRequired
A Breadcrumb with an href defined.
- 3Before slot
A slot to place an icon before the label.
- 4LabelRequired
The label of the Breadcrumb Item
- 5SeparatorRequired
A forward slash is used to separate items.
- 6Breadcrumbs Menu Button
A button used to trigger the overflow of items.
- 7Breadcrumbs Item (current page)
When no href is passed to the item the style will change and no link element will be rendered.
- 8Menu
Overflowed items will map to the Menu component.
Try the default
A working example with the shared V1 visual language.
When to use
Use for hierarchy, not browsing history. Make ancestor destinations links and keep the current page distinct.
Only ancestor links are keyboard stops. Separators are decorative; the current item is announced as the page.