Refine By

Breadcrumbs

  • Contents:

Breadcrumbs:

  • Help orient a user within a website’s hierarchy
  • Supplement a site’s primary desktop navigation

Guidelines

 

Sites with a flat, single-level hierarchy and one-page sites don’t need breadcrumbs. If your site doesn’t have sub-pages, consider highlighting the active page or section in the main nav.

Example of a breadcrumb trail

Use breadcrumbs when a site’s navigation architecture has three or more levels.

Illustration of breadcrumb trail hierarchy

A trail of breadcrumbs should always start with the homepage.

Illustration of correct breadcrumb styling

Use arrowheads, forward slashes, or other clear identifiers to separate the different breadcrumbs in the user’s trail.

A correctly-styled breadcrumb trail

Style the active link to look different from the other links in the breadcrumbs so a user can easily identify the current page.

Do not hyperlink the active link. Doing so will confuse users as to the current page.

A breadcrumb trail with correct styling
Correct breadcrumb styling

Do not replace the primary nav with breadcrumbs. Use breadcrumbs only as a supplementary navigational pattern.

Style

 

Breadcrumbs as they appear on both desktop and mobile web environments  

Accessibility

 

Using keyboard only (with no screen reader running)

  • Use
    key to navigate to breadcrumb links and ensure visible focus outline appears
  • Use [enter] key to activate breadcrumb links

On desktop with screen reader running

  • Use
    key to navigate to breadcrumb links
  • Ensure screen reader announces navigation region named “Breadcrumb”
  • Ensure screen reader announces list
  • Ensure screen reader announces links
  • Ensure screen reader announces current page
  • Ensure no decorative divider elements are announced such as / or > when using
    or arrow keys to navigate through the breadcrumb links

On mobile with screen reader running

  • Use [swipe] to navigate to breadcrumb links
  • Ensure screen reader announces navigation region named “Breadcrumb”
  • Ensure screen reader announces list
  • Ensure screen reader announces links
  • Ensure screen reader announces current page

On desktop, zoom the browser window to 200% (this may invoke the mobile view which is acceptable). Components, text labels, and other elements may change to reflect the mobile web view, but as long as content and other elements don’t overlap and the site functions correctly (and meets applicable acceptance criteria), then it passes.

On mobile, use the pinch feature to zoom the interface. Make sure that content doesn’t overlap with other copy or features on the screen.

Run your axe tool against both desktop and mobile versions to ensure that there are no errors specific to the scope of the relevant ticket.

Visit w3.org’s guide on coding accessible breadcrumb trails (link opens externally).

Related elements

Related components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
May. 08 2017 4:15pm Initial content entry