Breadcrumbs

Use Breadcrumbs to show users their location within a hierarchy of more than two levels. Users can navigate back to any higher level directly.

OverviewPropertiesUsage

When to use

• In main views if more than two hierarchy levels exist that aren't accessible via other prominent navigational components, such as the AppHeader.
• In a DetailView, Modal, Drawer, or Sheet if they contain more than two hierarchy levels.
• On mobile if more than two hierarchy levels exist, regardless of their accessibility via other navigational components. This helps users quickly orient themselves within the app.

When not to use

• If no more than two hierarchy levels exist. Consider using a back button instead.
• Combined with a back button in the same view — use one or the other.

Breadcrumb items

• Include a link to the starting point of the current context as the first breadcrumb item. It doesn't have to be the app's home. For example, if using Breadcrumbs inside a DetailView or Modal, the first breadcrumb should direct users to the initial view.
• Always include the title of the current view or page as the last breadcrumb item and set it to disabled.
• Don't include tabs as a hierarchy level — one context or page is always one hierarchy level.
• Include hierarchy-level titles from navigational components as disabled breadcrumb items, such as submenu labels, to improve orientation.