Navigation Menu CSS Component

A navigation menu is simply a list of links, styled to look like ARIA menu items.

The aria-current attribute is used to programmatically denote the current page state and current link.

<div class="navigation-menu">
  <ul class="navigation-menu__items">
    <li>
      <a
        class="navigation-menu__item"
        href="https://www.ebay.com"
        aria-current="page"
      >
        <span> Link 1 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </a>
    </li>
    <li>
      <a href="https://www.ebay.com" class="navigation-menu__item"> Link 2 </a>
    </li>
    <li>
      <a href="https://www.ebay.com" class="navigation-menu__item"> Link 3 </a>
    </li>
  </ul>
</div>