Breadcrumb

There is a visual standard that all breadcrumbs must match even if the exact implementation of that breadcrumb varies between products. The next section shows how a breadcrumb could be implemented that follows best practices and accessibility standards. A CLASS is available in the global.css sheet that has all of the required styles.

1. The first link must be to the DigiKey home page. It will use the icon-home icon and for accessibility the word home will be wrapped in a span with the class sr-only so that it is visible to screen readers.
2. Every level except the current page needs to be a bolded link

<nav
    aria-label="Breadcrumb"
    class="dk-breadcrumb">
    <ol>
        <li>
            <a href="https://www.digikey.com/" class="icon-home">
                <span class="sr-only">Home</span>
            </a>
        </li>
        <li>
            <a href="...">Product Index</a>
        </li>
        <li>
            <a href="...">Industrial Automation</a>
        </li>
        <li>
            <a href="...">Accessories</a>
        </li>
        <li>
            <a href="..." aria-current="page">Passive Infrared</a>
        </li>
    </ol>
</nav>

Best Practices

The above example shows a way that you can implement a breadcrumb that fits within the design guidelines and follows best practices to meet accessibility standards. The classname dk-breadcrumb is available in the global.css sheet and adds the proper styling if following this example.

1. For accessibility the breadcrumb should start with a NAV element that has an aria-label="Breadcrumb" and a CLASS of dk-breadcrumb
2. Inside of the NAV have an OL element.
3. Inside of the OL have each LI represent a level of the breadcrumb.
4. Each LI should wrap around a link to that page.
5. The page that the user is on should be the last item in the list and have the aria-current="page" attribute on the link.