Breadcrumb Example

The following example demonstrates the breadcrumb design pattern.

Example

Accessibility Features

Keyboard Support

No keyboard interaction needed.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
aria-label=Breadcrumb nav Provides a label that describes the type of navigation provided in the nav element.
aria-current=page a Applied to the last link in the set to indicate that it represents the current page.

Javascript and CSS Source Code

HTML Source Code

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="../../">
        WAI-ARIA Authoring Practices 1.1
      </a>
    </li>
    <li>
      <a href="../../#aria_ex">
        Design Patterns
      </a>
    </li>
    <li>
      <a href="../../#breadcrumb">
        Breadcrumb Pattern
      </a>
    </li>
    <li>
      <a href="./index.html" aria-current="page">
        Breadcrumb Example
      </a>
    </li>
  </ol>
</nav>