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>
            <span aria-current="page">Passive Infrared</span>
        </li>
    </ol>
</nav>

<div dir="rtl" class="rtl">
    <nav aria-label="Breadcrumb" className="dk-breadcrumb">
        <ol>
            <li>
                <a href="https://www.digikey.com/" className="icon-home">
                        <span className="sr-only">דף הבית</span>
                </a>
            </li>
            <li>
                    <a href="...">מחשבוני המרה</a>
            </li>
            <li>
                <a href="..." aria-current="page">
                        מחשבון מחלק זרם
                </a>
            </li>
        </ol>
    </nav>
</div>

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 span.

Note: The breadcrumb styles are expecting the breadcrumbs to be inside the formatted page layout (i.e. dk-layout or layout-onecolumn) and would require wrapping the <nav> tag with a div containing the classname dk-breadcrumb--wrapper. This will align the breadcrumb to match the rest of the page layout.