Breadcrumb
Last Updated on Sep 29, 2022
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.
Component Variants
Design Principles
- Breadcrumbs serve as a guide to the user’s location within the page structure. If the page has multiple hierarchies, choose the primary one.
- Breadcrumbs should not take up more than one line of vertical space. They shouldn’t no wrap. Truncate text when necessary. At more than three levels, an ellipsis is introduced to hide additional parent levels.
- Breadcrumb links should reflect the titles of the linked pages.
- Breadcrumbs support the main navigation but do not replace menus, search or searchable menus.