@vcl/vcl/toolbar/demo/example-main.html

The whole VCL in one package

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css">

<div class="toolbar scale110p row justify-between" role="menubar" aria-level="1">
  <a class="row center" href="#">
    <img class="responsive-image logo" role="presentation" src="https://cdn.jsdelivr.net/gh/vcl/vcl/gfx/vcl_logo_square-bw.svg" style="max-width: 3em;">
    <h1 class="toolbar-title">App Name</h1>
  </a>

  <nav class="navigation">
    <ul class="row">
      <li class="navigation-item" role="presentation" tabindex="0">
        <a class="navigation-item-label icogram" href="#" tabindex="-1">
          <span class="icon mdi mdi-home" aria-hidden="true" aria-label="home" role="img"></span>
          <span class="text">Link 1</span>
        </a>
      </li>
      <li class="navigation-item selected" tabindex="0">
        <a class="navigation-item-label icogram" href="#" tabindex="-1">
          <span class="icon mdi mdi-email" aria-hidden="true" aria-label="envelope" role="img"></span>
          <span class="text">Link 2</span>
        </a>
      </li>
    </ul>
  </nav>

  <div class="row">
    <button type="button" class="button half-transparent square">
      <div class="icogram">
        <div class="icon mdi mdi-email" aria-hidden="false" aria-label="contact" role="img"></div>
      </div>
    </button>

    <button type="button" class="button half-transparent square">
      <div class="icogram">
        <div class="icon mdi mdi-account" aria-hidden="false" aria-label="account" role="img"></div>
      </div>
    </button>
  </div>
</div>