Breadcrumb Navigation
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:
.breadcrumb li:not(:first-child)::before {
content: "→";
}
This solution uses a more complex selector, but requires less 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.
Browser compatibility
The various layout methods have different browser support. See the charts below for details on basic support for the properties used.
Flexbox
BCD tables only load in the browser