Breadcrumbs are used to make websites and/or applications easier to navigate by letting users know what page they are currently on and what section they are in. Here's some additional information for best practices:

The first <li> element adds in the locator icon at the beginning of the breadcrumb. The hiddenButRead class is hidden, but a screen reader will read "You are here" for accessibility purposes.

Breadcrumbs | Basic Sass file: /sass/_acs-breadcrumbs.scss


<div class="breadcrumb">
  <ul role="navigation">
    <li class="hiddenButRead first"><strong>You are here:</strong></li>
    <li class="first"><a href="#">American Chemical Society</a></li>
    <li><a href="#">Level 1</a></li>        
    <li>Level 2</li>      
  </ul>
</div>