Components
Breadcrumb
Breadcrumbs are used for navigating content in parent-child relationships within pages or overlays. They provide context for where users are in a nested hierarchy.
Page name: A page from an application that can be accessed via a link.
Separator: An entity that creates a visual distinction between breadcrumb items.
Current Page: The current in-app location.
What are breadcrumbs used for?
Breadcrumbs are used for navigating content in parent-child relationships within pages or overlays.
Parent-child relationships: When content accessed from a previous page has a direct relationship to its origin access page's content.
Pages: Distinct workspaces represented by entities within the application's main navigation, containing isolated hierarchies of information.
Overlays: User interface elements that appear above a page (modals, layers, drawers, sheets, etc.), and contain an isolated hierarchy of information.
Within a page
Breadcrumbs within pages always begin with a page represented in the application's main navigation.
In the example below, a breadcrumb is used to help users navigate through a hierarchy of folders inside the Asset Library. Asset Library is the first level of the hierarchy, and it is contained in the app's main navigation.
Within an overlay
Breadcrumbs within overlays always begin with the topmost level in the hierarchy, in other words, the overlay's initial state when a user opens it for the first time.
In the example below, the Asset Library is launched within a modal for moving assets into folders. In this example, the breadcrumb is used for navigating throughout the structure of folders inside the Asset Library.
The modal's initial state is the Asset Library home, which represents the first item in the breadcrumb.
With overflow
Having a breadcrumb that wraps into multiple lines should be a last resort because it affects the layout of a page or overlay. Make use of an overflow menu instead.
Long breadcrumb items will automatically truncate, with its full title accessible on hover.
Best practices
Use breadcrumbs to show page hierarchy, not a user's history.
Breadcrumbs are used when a page's content, and its origin page's content, form a hierarchy independent of the user's path.
Use breadcrumbs for pages on the same navigation level.
Breadcrumbs are used for navigating through a hierarchy of page levels (usually more than 2).
Use breadcrumbs on the top of the page, below the page title.
Breadcrumbs are placed on a page's header, above the fold, for easy access.