Breadcrumbs
Overview
Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.
When to use
- To show users where they are in your overall structure.
- To offer a way to go up the hierarchy back to the start.
Anatomy
1. Active state: Indicates all the links which can be clicked onto and in timeline.
2. Slash: For showing a visual differentiation between 2 links/pages in a series.
3. Current state: Shows the name of the page/link the user is on currently.
Best Practices
- Not be too large - The breadcrumb trail is a secondary navigation aid and hence its size and prominence should be less than that of the primary navigation.
- Start with the homepage and end with the current page.
- Have a simple, one-character separator between each level
- Not be used if all the pages are on the same level. Breadcrumbs are intended to show hierarchy.
Recommended resources
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.
.svg)
