Switch to M&TBreadcrumb
Breadcrumbs are a secondary navigation asset used to show a user their current location in an information architecture. Pages are represented as a horizontal list, starting from a top level and ending with the current location. The current page is displayed as plain text, while the top level and levels of organization in between are hyperlinks.
Variants
The breadcrumb consists of a horizontal row of links, except for the current page, separated by close angle brackets to indicate hierarchy levels. Each link has the same states and behavior as the link component
<div class="c-breadcrumb">
<ul>
<li><a href="" class="c-link">Breadcrumb One</a></li>
<li><a href="" class="c-link">Breadcrumb Two</a></li>
<li>Breadcrumb Three</li>
</ul>
</div>Accessibility
Place the breadcrumb trail in a <nav> element or give the parent element the role="navigation" attribute. The nav element inherently has a navigation role so do not use both. Add the aria-label="breadcrumbs" to provide context as to what type of navigation it is and the aria-current="page" attribute to the current page link.
Design Environment
Breadcrumbs are located at the top left of a page, beneath the header and primary navigation and above the page title. Breadcrumb trails should not wrap. The asset is small to place it lower in the visual hierarchy.
Microcopy
Breadcrumbs should be identical to page titles to avoid any confusion. Use title case for breadcrumb text.