@vcl/vcl/navigation/demo/example-horizontal.html

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">

<nav class="navigation">
  <ul class="row">
    <li class="navigation-item" aria-selected="false" tabindex="0">
      <a class="navigation-item-label icogram" href="#" tabindex="-1">
        <span class="icon fas fa-home" aria-hidden="true" aria-label="home" role="img"></span>
        <span class="text">Home</span>
      </a>
    </li>
    <li class="navigation-item selected" aria-selected="true" tabindex="0">
      <a class="navigation-item-label icogram" href="#" tabindex="-1">
        <span class="icon fas fa-envelope" aria-hidden="true" aria-label="envelope" role="img"></span>
        <span class="text">Contact</span>
      </a>
    </li>
    <li class="navigation-item" aria-selected="false" tabindex="0">
      <a class="navigation-item-label icogram" href="#" tabindex="-1">
        <span class="icon fas fa-bicycle" aria-hidden="true" aria-label="bicycle" role="img"></span>
        <span class="text">Products</span>
      </a>
    </li>
    <li class="navigation-item" aria-selected="false" tabindex="0">
      <a class="navigation-item-label icogram" href="#" tabindex="-1">
        <span class="text">Iconless item</span>
      </a>
    </li>
    <li class="navigation-item disabled" aria-selected="false" tabindex="-1">
      <a class="navigation-item-label icogram" href="#" tabindex="-1">
        <span class="text">Disabled item</span>
      </a>
    </li>
  </ul>
</nav>