Breadcrumb

Also known as: Breadcrumb trail, Page location

Preview

Resources

Figma icon
Figma
CSS icon
CSS
React icon
React
Elixir icon
LiveView

Properties

PropertyValuesDefault
Selected VariantDefault | ActiveDefault
State VariantDefault | Hover | FocusDefault
Icon Booleantrue | falsefalse
Label TextstringPage 1
Has overflow Booleantrue | falsefalse

Overflow

To handle long navigation paths, breadcrumb component truncates middle items with an ellipsis. Hovering over this ellipsis reveals a dropdown, allowing users to access and navigate through the hidden pages.

When to use

Breadcrumb navigation allows users to navigate back to previous page levels.
When the main navigation already provides sufficient context for navigation.