Breadcrumbs are placed in the top left portion of the page. They sit underneath the header and navigation, but above the page title.
Location-based: These illustrate the site’s hierarchy and show the user where they are within that hierarchy.
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.
1. When orientation matters. Breadcrumbs show where the current page is located in the website hierarchy. Use a breadcrumb when it’s likely that a user will arrive at an interior page from search or from an outside link.
2. To facilitate navigation. Breadcrumbs make it easier to understand complex sites. Use breadcrumbs to reinforce your site’s structure.
Simple sites. If the website is not very deep and the context for the current page is clear from the main navigation.
Landing pages. Omit breadcrumbs on the homepage of a site. Breadcrumbs could also be omitted from section landing pages. Breadcrumbs are most useful when the hierarchy is not immediately apparent from the main navigation.
Redundant side navigation. When side navigation is used in combination with main navigation, it may be redundant to include breadcrumbs.
Step-by-step processes. Use breadcrumbs for hierarchical relationships, not linear relationships (like individual steps in a multi-step process).
1. Consider alternatives to wrapping. In general, rely on truncating the title of the current page over wrapping breadcrumb text. But usability comes first. Consider alternative approaches if the title of the current page is completely truncated. For example, a mobile-friendly breadcrumb may show only a page’s direct parent. Sites with very long breadcrumb trails might ultimately need to wrap breadcrumbs, or consider flattening the information architecture of the site.
2. Use complete page titles. Use the same wording in breadcrumb text as in the page title.
3. Start with the word “Home”. Rather than using a house icon, spell out the word “Home” as the first link in the breadcrumbs.
4. Consider size of tap targets on small widths. Although breadcrumbs are frequently displayed using smaller text, make sure the text is not too small to select at small widths.
1. Use the nav element. This allows assistive technology to present the breadcrumbs in context as a navigational element on the page.
Treat separators as text when it comes to contrast. Use separators that have AA contrast against their background.
2. Use ordered lists and list items. Use an ol for breadcrumbs and an li for each item. This allows assistive technology to enumerate the items in the breadcrumbs and allows shortcuts between list items.
3. Use ARIA markup for additional context. Use aria-label="Breadcrumbs" on the main element and aria-current="page" on the current page.
Hide separators from screen readers. The separators between links in the breadcrumbs should not be read by screen readers.