Introduction
The breadcrumb is a secondary navigation pattern that aids users in comprehending the hierarchical structure of levels and facilitates navigation back through them. It consists of a list of links that displays the current page's location within the navigational hierarchy.
Usage
Breadcrumbs are most suitable for websites that follow a hierarchical structure, such as documentation or e-commerce sites. In cases where all content exists on a single level, such as blog posts, breadcrumbs serve no practical purpose.
Breadcrumbs serve as a secondary hierarchial navigation to help users easily navigate a website and understand the context of the current. Keep your breadcrumb labels short and under 7 levels.
In order to help users better navigate, don't use over 7 levels of breadcrumbs. Truncate breadcrumbs level when there are either too many or not enough space.
You can opt to display a home icon instead of a text to refer to the homepage.
Only use icons in lieu of a homepage link. Don't use icons in any other levels.
Truncate longer labels when the horizontal space is too small or the title too long.
Avoid wrapping labels, opt to truncate instead.
Always keep the last breadcrumb label as a text instead of a link.
Don't link to external sites in breadcrumbs, use inline or standalone links instead.
Mobile Usage
Also known as
Breadcrumb trail, navigational trail