Breadcrumb navigation
Baseline: Widely supported
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
Breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page.
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:
css
.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