Breadcrumbs Component
<nav
aria-labelledby="breadcrumbs-heading"
class="breadcrumbs"
role="navigation"
>
<h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
<ul>
<li>
<a href="https://www.ebay.com/"> ebay </a>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12" />
</svg>
</li>
<li>
<a href="https://www.ebay.com/rpp/cell-phone-pda">
Cell Phones, Smart Watches & Accessories
</a>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12" />
</svg>
</li>
<li>
<a
href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905"
>
Smart Watch Accessories
</a>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12" />
</svg>
</li>
<li>
<a aria-current="location"> Smart Watch Bands </a>
</li>
</ul>
</nav>
If the last breadcrumb is not the current page, then that link must have a valid href.
<nav
aria-labelledby="breadcrumbs-heading"
class="breadcrumbs"
role="navigation"
>
<h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
<ul>
<li>
<a href="https://www.ebay.com/"> ebay </a>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12" />
</svg>
</li>
<li>
<a href="https://www.ebay.com/rpp/cell-phone-pda">
Cell Phones, Smart Watches & Accessories
</a>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12" />
</svg>
</li>
<li>
<a
href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905"
>
Smart Watch Accessories
</a>
</li>
</ul>
</nav>
Anchor tags can be replaced with buttons if the hierarchy is not intended to be deep linkable . This is a rare & unlikely scenario - therefore please exercise caution!
Long Breadcrumbs with Overflows
Long breadcrumbs can arise due to any combination of small screen sizes, large category names and language translations. In these situations the breadcrumbs will need to get an overflow treatment in the second node with an overflow button and menu items.
If there are 4 or more nodes for breadcrumbs, an overflow on node 2 should be used instead of various additional nodes between that node and the final one. The list of items in the overflow menu should include content from node 2 until last node minus 2 nodes so that there are always 4 nodes on screen including the overflow button node. You cannot show more than 3 breadcrumbs + overflow, or 4 breadcrumbs. The minimum amount to show is 1 leading item, overflow, and the current page you are on.
Additionally, to account for smaller screens, there is a maximum width limit on each node label. Please check the CSS for details (not specified here intentionally to avoid doc/code misalignment).
<nav
aria-labelledby="breadcrumbs-heading"
class="breadcrumbs breadcrumb--overflow"
role="navigation"
>
<h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
<ul>
<li>
<a href="https://www.ebay.com/"> ebay </a>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12" />
</svg>
</li>
<li>
<span class="fake-menu-button">
<button
class="fake-menu-button__button icon-btn"
aria-expanded="false"
aria-haspopup="true"
aria-label="eBay Menu"
type="button"
>
<svg aria-hidden="true" class="icon icon--16">
<use href="#icon-overflow-horizontal-16" />
</svg>
</button>
<ul class="fake-menu-button__menu">
<li>
<a
class="fake-menu-button__item"
href="https://www.ebay.com/rpp/cell-phone-pda"
>
Cell Phones, Smart Watches & Accessories
</a>
</li>
<li>
<a
class="fake-menu-button__item"
href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905"
>
Smart Watch Accessories
</a>
</li>
<li>
<a
class="fake-menu-button__item"
href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906"
>
Smart Watch Bands
</a>
</li>
</ul>
</span>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12" />
</svg>
</li>
<li>
<a
href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand2"
>
Smart Watch Band Long Band Text Type 2
</a>
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12" />
</svg>
</li>
<li>
<a aria-current="location"> Current Band </a>
</li>
</ul>
</nav>