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.
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.
- 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.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.