Breadcrumb

Breadcrumbs are links that help users understand where they are in a website, and how concepts relate in the context of the site.
Status:
In use

A breadcrumb bar shows the location of the current page in the site structure. It’s like a path from the current page back to the home page, showing each level of organization in-between. Breadcrumbs allow a user to navigate “up” to a parent section. Breadcrumbs help users navigate and understand the organization of your site.

Examples and code

Breadcrumb example

Generic example: 

Home / Child page name / Grandchild page name

Screenshot of site example: 

 

Code / how to use

Drupal builds breadcrumbs automatically, based on URL structure. 

 

When to use

  • Most web pages merit some kind of breadcrumb. 
  • Orientation matters. Breadcrumbs show where the current page is located in the website hierarchy. It’s likely that a user will arrive at an interior page from search or from an outside link.
  • To facilitate navigation. Breadcrumbs make it easier to understand complex sites. Use breadcrumbs to reinforce your site’s structure.

When to consider something else 

  • Simple sites. If the website is not very deep and the context for the current page is clear from the main navigation. This does not often apply to Library work. 
  • Landing pages. Omit breadcrumbs on the homepage of a site. Breadcrumbs could also be omitted from section landing pages. 
  • Redundant 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).

Usability guidance

  • Consider alternatives to wrapping. In general, rely on truncating the title of the current page over wrapping breadcrumb text. But usability comes first. Sites with very long breadcrumb trails might ultimately need to wrap breadcrumbs.
  • Use complete page titles. Use the same wording in breadcrumb text as in the page title.
  • Start with the word “Home”. Rather than using a house icon, spell out the word “Home” as the first link in the breadcrumbs.
  • 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.

Accessibility guidance - NEEDS CHECK

  • 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.
  • 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.
  • 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.

 

Components

Utilities