Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li><a>Breadcrumb 1</a></li>
        <li><a>Breadcrumb 2</a></li>
        <li><a>Breadcrumb 3</a></li>
        <li><a aria-current="page">Breadcrumb 4</a></li>
    </ol>
</nav>

Accessibility #

Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as aria-label="Breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.