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.

Note: Every level except the current page needs to be a bolded link

<nav aria-label="Breadcrumb" class="dk-breadcrumb">
    <ol>
        <li><a href="/en/application-technology">Resources</a></li>
        <li><a aria-current="page" href="/en/application-technology">Applications &amp; Technologies</a></li>
    </ol>
</nav>

<nav
    aria-label="Breadcrumb"
    class="dk-breadcrumb">
    <ol>
        <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="...">מחשבוני המרה</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.