Breadcrumb Navigation - CSS: Cascading Style Sheets 编辑

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

Download this example

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

BCD tables only load in the browser

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Flexbox

See also

• CSS Flexible Box Layout
• Providing a Breadcrumb Trail
• Using the aria-current attribute