Overview
When drilling down in an application, users can refer to the breadcrumb control to immediately locate themselves in relation to its different depth levels. Breadcrumb also allows users to just as easily trace back their steps and resurface on a more shallow level of this same application.
Overview
See also:
Anatomy
1
50.00; 24.84
Clickable item
2
48.81; 78.07
Current item
Indicates the current location, not clickable
- If there is a clear and easily accessible home button in the UI, do not display home in the breadcrumb.
- Use for two or more levels of depth, excluding home if there are other ways to navigate to it.
- Use the default slash separator between items.
1
47.15; 13.23
Overflow dropdown
- In the case of overflow, the first item to go into the dropdown should be the topmost item in the hierarchy (leftmost item in left-to-right languages) and proceed towards the current item.
- Do not use the dropdown as a means of attributing same-level / lateral navigation to an item.
Responsiveness
Breadcrumb always collapses into a select dropdown menu from the higher level to the lower one, i.e. from left to right in most cases. The very last item (current level) does not collapse.
See also:
When to Use
1
do
false
Recommended
- Only use for back navigation within the same application.
- Use when one or more levels of depth can be resurfaced at a time by clicking on the breadcrumb links.
- Inform the user of their current location in the application structure.
1
dont
false
Not Recommended
- When there is less than two levels of depth in the navigation.
- To go backwards within the same level of depth (or step-by-step). For this, use the browser back button.
- To perform "Lateral navigation". Navigation on the same level of depth is not "logged" on the breadcrumb.
- To perform or log cross-application navigation.
- As a replacement for a page title