Breadcrumbs

The Breadcrumbs component can be used to indicate the location and hierarchy of the current page. It also allows users to easily navigate back to a higher level in the hierarchy.

OverviewPropertiesUsage

When to use

• Use Breadcrumbs in main views if more than two hierarchy levels exist that aren't accessible via other prominent navigational components, such as the AppHeader.
• Use Breadcrumbs a in DetailView, Modal, Drawer, and Sheet if they contain more than two hierarchy levels.
• Include Breadcrumbs on mobile if more than two hierarchy levels exist, regardless of their accessibility via other navigational components. This approach ensures that users can quickly orient themselves within the app.
• Consider using a back button instead of Breadcrumbs if no more than two hierarchy levels exist in the same view.
• Don't use back buttons combined with Breadcrumbs in the same view.

Breadcrumb items

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