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 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