The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels, navigate back through them and reveals the user’s location.
Breadcrumbs are effective in experiences that have a large amount of content organized in a hierarchy of more than two levels. They take up little space but still provide context for the user’s place in the navigation hierarchy.
None.
The breadcrumb consists of:
- Page link: directs users to the parent-level page
- Seperator: clearly distinguishes between each page
- Icon (optional): this icon shows the homepage
- Collapsed icon: hides the intermediate pages
The breadcrumb contains the states inactive, active, hover and focus.
- Page link: TheSans/md/400
- Inactive page link: text color Blue/3
- Active page link: text color Grey/4
- Separator: svg color Grey/4
- Icon: svg color Blue/3
- Collapsed icon: background-color Grey/1, svg fill color Grey/3
- Hover: page link text color Blue/4, icon svg color Blue/4, collapsed icon background-color Grey/2
- Focus: page link text color Blue/4, icon svg color Blue/4, border color Ocher/5
- Seperator: margin-left and margin-right 8px, height and width 16px
- Icon: height and width 20px
- Collapsed icon: height 16px, width 24px
[technical requirements]
Page links should:
- Be short and clearly reflect the location or entity it links to;
- Start with the highest level parent page and move deeper into the information architecture as the breadcrumb trail progresses;
- Be consistent with the page titles;
Read documentation about microdata for the Breadcrumb on https://schema.org/BreadcrumbList
Breadcrumbs should:
- Include the current page as the last item in the breadcrumb trail
- Include only site pages, not logical categories in your information architecture
- Include the full navigational path
- Use a collapsed icon to truncate the breadcrumbs when space becomes limited
- Not exceed half of the page
- Preferably not have more than 6 pages. If there are more than 6 pages, look how you can improve the menu structure.
Breadcrumbs should:
- Not wrap onto a second line
- Not be used for pages that have single level navigation because they create unnecessary clutter
- Always show the first and current page
- Only use the collapsed icon if there are more than 4 pages.
- If the collapsed icon is used, always show on the right side the underlying page and next to this the current page.
- If there are for example 5 pages, then show the homepage (1), hide the 2nd and 3rd page and show the 4th and current page (5).
- If there are for example 6 pages, then show the homepage
https://www.nngroup.com/articles/breadcrumbs/ https://blog.hubspot.com/marketing/navigation-breadcrumbs https://blog.prototypr.io/design-guide-breadcrumbs-a980eb28bfaa?gi=a989e02ab9ff