Breadcrumb Navigation

Why and When to Use

The breadcrumb is a form of secondary navigation that shows the user their location in a section of the website. The breadcrumb gives the user the ability to track their path back to their original starting point. Breadcrumbs are typically used when there is a large volume of content organized in a hierarchy, essentially the same as a search engine.

How to Use

Breadcrumbs are a navigation list whose order of items is important. So the list will be marked up using a nav and ordered list HTML elements. For the items within the list, if they are a previous page they will be marked up as a text link, if the item is user’s current page then it will not be a link.

This breadcrumb list includes a heading because it is necessary for accessibility. The heading will be hidden visually because of the "--sr" modifier added to the heading class name.

NEEDS:

1. Repeat the breadcrumbs__item element as many times as needed
2. breadcrumbs__link elements require an href that links to the pages they reference
3. breadcrumbs__link elements need aria-label value if the text content of the link doesn't clearly represent where the user will go after clicking the link

    <nav class="breadcrumbs" role="navigation" aria-label="Breadcrumb Navigation">
        <h1 class="breadcrumbs__heading--sr">You are here:</h1>
        <ol class="breadcrumbs__list">
            <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="" aria-label="">Insert Previous Page Name</a></li>
            <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="" aria-label="">Repeat as needed</a></li>
            <li class="breadcrumbs__item--active">Insert Current Page</li>
        </ol>
    </nav>