Breadcrumb

When to use the breadcrumb component

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.

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.

Landing pages.

Omit breadcrumbs on the homepage of a site. Breadcrumbs could also be omitted from section landing pages.

Step-by-step processes.

Use breadcrumbs for hierarchical relationships, not linear relationships (like individual steps in a multi-step process).

Usability guidance

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

Use the nav element.

This allows assistive technology to present the breadcrumbs in context as a navigational element on the page.

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.

Use ARIA markup for additional context.

Use aria-label="Breadcrumbs" on the main element and aria-current="page" on the current page.

USWDS Documentation

For more guidance, view the USWDS Breadcrumb Component Documentation.