Breadcrumb Navigation

The breadcrumb navigation tells the user their current location on the site. It lists, from right to left, the current page and a linked hierarchy of all its parent pages.


The breadcrumb navigation consists of an unordered list of links to the current page's ancestors, followed by an unlinked entry for the current page.

The breadcrumb__item--current class will indicate the last item as the current location and cancel out the separator that would normally be displayed.

An example breadcrumb navigation
<ul class="breadcrumb">
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="#">The Parent's Parent</a></li>
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="#">Its Parent Page</a></li>
    <li class="breadcrumb__item breadcrumb__item--current">This Page</li>