Breadcrumb navigation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page. The items typically display inline, with a separator between each item, indicating the hierarchy between individual pages.

Links displayed inline with separators

Requirements

Display the hierarchy of the site by displaying inline links, with a separator between the items, indicating the hierarchy between individual pages, with the current page appearing last.

Recipe

Note: The example above uses a complex selector to insert content before every li except the last one. This could also be achieved using a complex selector targeting all li elements except the first:

css
.breadcrumb li:not(:first-child)::before {
  content: "→";
}

Feel free to choose the solution that you prefer.

Choices made

To display list items inline, we use flexbox layout, thus demonstrating how a line of CSS can give us our navigation. The separators are added using CSS generated content. You could change these to any separator that you like.

Accessibility concerns

We used the aria-label and aria-current attributes to help assistive technology users understand what this navigation is and where the current page is in the structure. See the related links for more information.

Be aware that the arrows added via content are exposed to screen readers and braille displays.

See also