<nav class="example-hover-list" aria-label="Site">
  <ol class="level-1">
    <li>
      <a class="home" href="/">
        Home
      </a>
    </li>
    <li>
      <a class="store" href="/store/">
        Store
      </a>
      <ol>
        <li><a href="/products/roasts/">Coffees by roast</a></li>
        <li><a href="/products/flavors/">Coffee makers</a></li>
        <li><a href="/products/origins/">Coffee mills</a></li>
      </ol>
    </li>
    <li>
      <a class="about" href="/about/">
        About
      </a>
    <li>
      <a class="contact" href="/contact/">
        Contact
      </a>
    </li>
  </ol>
</nav>

<nav class="example-popover-list" aria-label="Site">
  <ol class="level-1">
    <li>
      <a class="home" href="/">
        Home
      </a>
    </li>
    <li class="list-item-expandable popover-toggle">
      <a class="store" href="/store/">
        Store
      </a>
      <button type="button"
              aria-expanded="false"
              class="icon-expander menu"
              id="roast-toggle-button"
              popovertarget="roast-sub-nav">
        <span class="hidden">Store menu</span>
      </button>
      <ol id="roast-sub-nav" 
          class="popover-surface" 
          popover>
        <li><a href="/products/roasts/">Coffees by roast</a></li>
        <li><a href="/products/flavors/">Coffee makers</a></li>
        <li><a href="/products/origins/">Coffee mills</a></li>
      </ol>
    </li>
    <li>
      <a class="about" href="/about/">
        About
      </a>
    <li>
      <a class="contact" href="/contact/">
        Contact
      </a>
    </li>
  </ol>
</nav>

<script>
const popover = document.getElementById("roast-sub-nav");

// on focusout of last link in roast-sub-nav use popover.hidePopover()
popover.addEventListener("focusout", (event) => {
  if (event.target === popover.lastElementChild.lastElementChild) {
    popover.hidePopover();
  }
});

</script>

<nav class="pagination " aria-label="Pagination">
  <ul>
    <li><a href="/1/">Previous</a></li>
    <li><a href="/1/" aria-label="Page 1">1</a></li>
    <li>
      <a href="/2/"
         aria-label="Page 2"
         aria-current="page">
        2
      </a>
    </li>
    <li><a href="/3/" aria-label="Page 3">3</a></li>
    <li><a href="/4/" aria-label="Page 4">4</a></li>
    <li><a href="/5/" aria-label="Page 5">5</a></li>
    <li><a href="/2/">Next</a></li>
  </ul>
</nav>

<nav class="taxonomy" aria-labelledby="taxonomy-title">
  <h2 id="taxonomy-title">Blog categories</h2>
  <ul>
    <li>
      <a href="/industry-trends/">
        Industry trends
      </a>
    </li>
    <li>
      <a href="/how-to-guides/">
        How-to guides
      </a>
    </li>
    <li>
      <a href="/case-studies/">
        Case studies
      </a>
    </li>
    <li>
      <a href="/product-updates/">
        Product updates
      </a> 
    </li>
    <li>
      <a href="/company-culture/">
        Company culture
      </a>
    </li>
  </ul>
</nav>

<nav class="example-site-map" aria-label="Site map">
  <ol>
    <li>
      <a href="/">Home</a>
      <ol>
        <li><a aria-current="page" href="/about/">About</a></li>
        <li><a href="/wholesale/">Wholesale</a></li>
        <li><a href="/contact/">Contact</a></li>
      </ol>
    </li>
    <li>
      <a href="/products/">Coffee blends</a>
      <ol>
        <li><a href="/products/roasts/">Roasts</a></li>
        <li><a href="/products/flavors/">Flavors</a></li>
        <li><a href="/products/origins/">Origins</a></li>
      </ol>
    </li>
    <li>
      <a href="/presses/">French presses</a>
      <ol>
        <li><a href="/presses/brands/">Press brands</a></li>
        <li><a href="/presses/sizes/">Press sizes</a></li>
        <li><a href="/presses/materials/">Press materials</a></li>
      </ol>
    </li>
    <li>
      <a href="/mills/">Coffee mills</a>
      <ol>
        <li><a href="/mills/brands/">Mill brands</a></li>
        <li><a href="/mills/types/">Mill types</a></li>
        <li><a href="/mills/parts/">Mill parts</a></li>
      </ol>
    </li>
  </ol>
</nav>