Breadcrumbs

A navigational indicator for displaying the current location within a website or application.

A breadcrumb component provides users with a clear and intuitive way to understand the hierarchy of the content, and to navigate back to previous sections of the website. Breadcrumbs are particularly useful for large websites or web applications with a deep and complex structure.

Presentation

Each breadcrumb within a breadcrumb component should be a link that can be clicked to navigate to the corresponding section of the website or application. The breadcrumb should be visually separated from the main content, and should be distinguishable from regular links. The last item in the breadcrumb list should indicate the current page.

Requirements

There are no further requirements for this component.

Guidelines

Between each link there should be a separator, such as a chevron or a slash. The separator should be visually distinguishable from the links.

Implementation

The breadcrumb should be a list of links, using either an <ol> or <ul> element. The last item in the list should indicate the current page and should not be linked. The list of links should be contained within a <nav> element with an appropriate accessible name, such as "breadcrumb".

<nav aria-label="breadcrumb" data-ddp-component-breadcrumb>
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Section 1</a></li>
    <li><a href="#">Section 2</a></li>
    <li aria-current="true"><a>Current Page</a></li>
  </ol>
</nav>
[data-ddp-component-breadcrumb] ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-ddp-component-breadcrumb] li {
    display: inline-block;
}

[data-ddp-component-breadcrumb] li:not(:last-child)::after {
    content: '';
    display: inline-block;
    border: solid currentcolor;
    border-width: 0 1px 1px 0;
    height: 0.6rem;
    margin-left: .7ch;
    margin-right: .75ch;
    opacity: 0.6666;
    pointer-events: none;
    width: 0.6rem;
    vertical-align: text-bottom;
    transform: translateY(-50%) rotate(-45deg);
}

Screen reader: "breadcrumb, navigation"
Screen reader: "list, 4 items"
Screen reader: "link, Home, 1 of 4"
...
Screen reader: "Current Page, current item, 4 of 4"
Screen reader: "end of list"

Requirements

The breadcrumb component should be contained within a <nav> element with an appropriate accessible name, such as "breadcrumb". The list of links should be contained within an <ol> or <ul> element. The last item in the list should indicate the current page and should not be linked; this can be achieved by removing the href attribute from the <a> element or removing the <a> element entirely, and by adding aria-current="true" to the last <li> element.

Guidelines

The separator between each link should not be announced by a screen reader. Therefore, use CSS to create a shape or to add a background image to the separator, rather than using a Unicode character such as a chevron or a slash.

Checkpoints for the Tester

  1. The breadcrumbs list is contained within a nav HTML element.
  2. The containing nav HTML element has the HTML attribute of aria-label="breadcrumb" with a reasonable value (not necessarily "breadcrumb").
  3. The breadcrumb items are implemented as list items in an ol or ul HTML element.
  4. The breadcrumb list items are links implemented with a HTML elements.
  5. Only the breadcrumb list item representing the current page has an HTML attribute and value of aria-current="true"
  6. The visual separator used to divide each breadcrumb item is not read out by screen readers.
Back to top