Breadcrumb Basics

Breadcumbs provide a visual hierarchy for users. They help define user location and provide a navigation trail as they click through the website. Breadcrumbs also allow the user to quickly navigate back to prevoius pages without having to use the back arrow.

Coding standards for breadcrumbs on AutoZonePro.com are as follows:

1. add .breadcrumbs class to <ul> element

2. add <span class=".show-for-sr">Current: </span> to link for current page (accessibility settings)

<div id="breadCrumb">
    <nav aria-label="You are here:" role="navigation">
        <ul class="breadcrumbs">
            <li><a href="/foundations/myshop/">My Shop</a></li>
            <li><a href="/foundations/category/replacement-parts.jsp">Replacement Parts</a></li>
            <li><a href="/foundations/parts/batteries.jsp">Batteries</a></li>
            <li><span class="show-for-sr">Current: </span>Product Results</li>
        </ul>
    </nav>
</div>