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

The whole VCL in one package

<nav class="navigation">
  <ul>
    <li role="sectionhead" class="navigation-heading">
      <span>Heading</span>
    </li>
    <li class="navigation-item" aria-selected="false" tabindex="0">
      <a class="navigation-item-label icogram" href="#" tabindex="-1">
        <span class="icon fas fa-angle-right" aria-hidden="true" aria-label="angle-right" role="img"></span>
        <span class="text">Item</span>
      </a>
    </li>
    <li class="navigation-item selected" aria-selected="false" class="selected" tabindex="0">
      <a class="navigation-item-label icogram" href="#" tabindex="-1">
        <span class="icon fas fa-angle-right" aria-hidden="true" aria-label="angle-right" role="img"></span>
        <span class="text">Selected item</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-angle-right" aria-hidden="true" aria-label="angle-right" role="img"></span>
        <span class="text">Item</span>
      </a>
    </li>
    <li role="sectionhead" class="navigation-heading">
      <span>Another Heading</span>
    </li>
    <li class="navigation-item" aria-selected="false" tabindex="0">
      <a class="navigation-item-label icogram" href="#" tabindex="-1">
        <span class="icon fas fa-angle-right" aria-hidden="true" aria-label="angle-right" role="img"></span>
        <span class="text">Item</span>
      </a>
    </li>
    <li role="separator" class="separator"></li>
    <li class="navigation-item" aria-selected="false" tabindex="0">
      <a class="navigation-item-label icogram" href="#" tabindex="-1">
        <span class="icon fas fa-angle-right" aria-hidden="true" aria-label="angle-right" role="img"></span>
        <span class="text">Item</span>
      </a>
    </li>
  </ul>
</nav>