Breadcrumbs

General information

This doc covers basic breadcrumbs made of links and doesn’t cover the accessibility of breadcrumbs that have menus, accordions, or other approaches embedded within them. For each of those techniques for hiding long breadcrumbs, use the appropriate component’s guidelines.

A list of breadcrumbs, or breadcrumb trail, is a navigational aid that helps the user keep track of their location within a site or application.

Breadcrumb trails consist of a list of links separated by a delimiter (a slash, colon, or icon in most cases). On this website they are separated by a colon, for example.

The preferred way to write a list of breadcrumbs is in an ordered list (<ol>) within a <nav> element. The <nav> element should have an aria-label or aria-labelledby attribute to identify the component as breadcrumbs. See Are the breadcrumbs coded in an <ol> to ensure order?

The HTML 5 spec recommends using a paragraph tag for breadcrumb navigation. While the order of the links won’t change within a paragraph, everyone I’ve talked to who uses a screen reader has preferred they be put in a list.

When to use breadcrumbs

Breadcrumbs should be placed on all base pages except the following:

• The homepage. You can find that by clicking the site logo and when you’re on the homepage it looks silly to have a breadcrumb back to the homepage directly above the name of the homepage because if you’re doing it right, they’re the same text.
• Pages available in the global navigation. You don’t need to provide a breadcrumb illustrating how to get to a page if the global header is already doing the job.

When not to use breadcrumbs

• The two exceptions above, for the reasons given.
• Content containers that aren’t base pages. Examples include modal and non-modal dialogs, drawers, accordions, or anything else that is already considered part of the current page.
• Step 2 or later of a serial process. Use a serial process stepper instead.

How to use breadcrumbs

A page should have one and only one official home in the site hierarchy, decided by your information architects, and usually reflected in the page’s URL. Even if you have one of the rare sites where a child page is determined to have more than one parent, you should only display one breadcrumb on the page. You’ll have to pick one.

The breadcrumb trail for a specific page does not reflect the path the user came to the page. It does reflect the location in the hierarchy.

Since each link in a breadcrumb trail is going to a specific page in the site hierarchy, the link label should match the title of the page exactly. Ideally, your <title> element and <h1> match on each page, in which case this is easy. If your <title> also includes things like the site name, go with the <h1>.

Some sites choose to make the current page a link to itself, and others choose not to. My personal opinion is that if you link me to where I already am I am going to glare at you for wasting my time.

If you do choose to make the current page a link, you also need to ensure that the link is marked with an aria-current value of page. See If the current page is a link, is it marked with aria-current=”page”?

If the site is extremely shallow, you may not need breadcrumbs at all.

If the site is extremely deep or you have one or more pages with really long names. you will want to ensure that your breadcrumbs can wrap without interfering with other components on the page.

Breadcrumbs enhance the user’s sense of place in the site, they don’t replace global or local navigation.

States

Each breadcrumb link has the same states as any other link: default (link), hover, active, and focus. Ensure you design for all four. For information on implementing these styles see Styling Links – Learn Web Development on the MDN site.

Depending on the page and your implementation, the breadcrumb may have a “truncated” state where one or more of the beginning or middle of the breadcrumbs are dropped (often replaced with an ellipse) so that the user can see the beginning and end of the trail without the breadcrumbs wrapping. Nielsen Norman recommends always shortening breadcrumbs on mobile viewports in Breadcrumbs: 11 Design Guidelines for Desktop and Mobile.

Guidelines

1.3.1 Information & Relationships – Level A

1.3.2 Meaningful Sequence – Level A

1.3.6 Identify Purpose – Level AAA

1.4.1 Use of Color – Level A

1.4.3 Contrast (Minimum) – Level AA

1.4.4 Resize Text – Level AA

1.4.6 Contrast (Enhanced) – Level AAA

Additional Resources

• The HTML 5 spec recommendation to use the <p> tag for breadcrumb navigation.
• The Aria Authoring Practices Guide (APG) provides a Breadcrumb Example page which serves as a tutorial on creating breadcrumb components.
• The APG’s Breadcrumb pattern recommends using the <nav> landmark, aria-label attribute, and aria-current attribute.
• Breadcrumbs: 11 Design Guidelines for Desktop and Mobile by Page Laubheimer at Nielsen Norman Group
• Designing Effective Breadcrumb Navigation by Vitaly Friedman at Smashing Magazine covers a lot of breadcrumb patterns