Breadcrumbs Landscape Analysis
Visual reference of usage across government sites
Examples of usage on small screens (commercial)
Breadcrumbs are an important navigational element that supports wayfinding — making users aware of their current location within the hierarchical structure of a website. Breadcrumbs are a list of links representing the current page and its “ancestors” (parent page, grandparent page, and so on), typically going all the way back to the site homepage. NN/g has been recommending breadcrumbs since 1995, as they provide many benefits to users at almost no cost to the UI.
- Supplement, not replace, other navigational components like main nav and section nav.
- Based on site hierarchy, not session history.
- For polyhierarchical sites, show single pathway.
- Include current page as last item (unlinked).
- Only include site pages, not category containers.
- Not needed for 1-2 levels of hierarchy.
- Start with home.
- Handle gracefully on small screens (don't wrap, only show last level).
- Maintain accessible tap target size (not too small).
If you’re using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.
- Put them at the top.
- Use "greater than" character.
- Use smaller type.
- Bold last (current) item.
- Don't use in lieu of page name.
A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.
- Breadcrumb trail is contained within a navigation landmark region.
- The landmark region is labelled via aria-label or aria-labelledby.
- The link to the current page has aria-current set to page. If the element representing the current page is not a link, aria-current is optional.
They have some advice that is contrary to most of the others: linking current page and allowing for "path-based" breadcrumbs (how you got there), not just location-based (where you are).
The breadcrumb component (aka, breadcrumb trail) is a secondary navigation pattern that shows hierarchy among content or traces a user’s path. Breadcrumbs enable users to move quickly up to a parent level or previous step. All links in a breadcrumb should be clickable.
Variations, Path-based, These show the actual steps the user took to get to the current page, rather than reflecting the site’s information architecture. Path-based breadcrumbs are always dynamically generated.
From the latest survey that includes data on breadcrumbs, participants preferred the typical ordered/unordered list markup over next and plain-text options for a total of 38%. Between ordered and unordered, ordered had 27% while unordered had 11%.
A set of links that can help a user understand and navigate a website hierarchy. A BreadcrumbList is an ItemList consisting of a chain of linked Web pages, typically described using at least their URL and their name, and typically ending with the current page.
- Use Ordered List for markup because the "position" property (an integer) is used to describe the order.
<ol>
<li>
<a href="https://example.com/dresses">Dresses</a>
</li>
<li>
<a href="https://example.com/dresses/real">Real Dresses</a>
</li>
</ol>