Breadcrumb navigation

Breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page.

Links displayed inline with separators

Requirements

The items typically display inline with a separator to indicate a hierarchy between individual pages.

Recipe

Note: The example above uses two selectors to insert content before every li except the first one. This could also be achieved using one selector only:

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

This solution uses a more complicated selector, but requires fewer rules. Feel free to choose the solution that you prefer.

Choices made

This pattern is laid out using a simple flex layout 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

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

Beware that the arrows added via content are also exposed to screen readers or braille displays.

Browser compatibility

BCD tables only load in the browser

See also