Navs

See Bootstrap docs
New
Icon navbar light .iconav

This new component is a fully responsive sidebar nav built on top of a simple .nav component. It is fixed to either the left or right side of the screen. For this demo it is shown inside the panel.

Use .iconav-left or .iconav-right to set the side position.

<nav class="iconav iconav-light iconav-left">
  <a class="iconav-brand" href="#">
    <span class="svg-icon svg-icon-lg text-primary">
      @@include("../assets/img/stockholm/Shopping/Box-2.svg")
    </span>
  </a>
  <div class="iconav-slider">
    <ul class="nav iconav-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">
          <span class="svg-icon text-primary">
            @@include("../assets/img/stockholm/Home/Earth.svg")
          </span>
          <span class="nav-link-label">Dashboard</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <span class="svg-icon text-primary">
            @@include("../assets/img/stockholm/Shopping/Chart-line-1.svg")
          </span>
          <span class="nav-link-label">Statistics</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">
          <span class="svg-icon text-primary">
            @@include("../assets/img/stockholm/Shopping/Wallet-3.svg")
          </span>
          <span class="nav-link-label">Orders</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <span class="svg-icon text-primary">
            @@include("../assets/img/stockholm/Code/Question-circle.svg")
          </span>
          <span class="nav-link-label">Support</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <span class="svg-icon text-primary">
            @@include("../assets/img/stockholm/General/Unlock.svg")
          </span>
          <span class="nav-link-label">Sign out</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Icon navbar dark .iconav-dark

<nav class="iconav iconav-dark iconav-left">
  <a class="iconav-brand" href="#">
    <span class="svg-icon svg-icon-lg text-pastel-info">
      @@include("../assets/img/stockholm/Shopping/Box-2.svg")
    </span>
  </a>
  <div class="iconav-slider">
    <ul class="nav iconav-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">
          <span class="svg-icon text-pastel-info">
            @@include("../assets/img/stockholm/Home/Earth.svg")
          </span>
          <span class="nav-link-label">Dashboard</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <span class="svg-icon text-pastel-info">
            @@include("../assets/img/stockholm/Shopping/Chart-line-1.svg")
          </span>
          <span class="nav-link-label">Statistics</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">
          <span class="svg-icon text-pastel-info">
            @@include("../assets/img/stockholm/Shopping/Wallet-3.svg")
          </span>
          <span class="nav-link-label">Orders</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <span class="svg-icon text-pastel-info">
            @@include("../assets/img/stockholm/Code/Question-circle.svg")
          </span>
          <span class="nav-link-label">Support</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <span class="svg-icon text-pastel-info">
            @@include("../assets/img/stockholm/General/Unlock.svg")
          </span>
          <span class="nav-link-label">Sign out</span>
        </a>
      </li>
    </ul>
  </div>
</nav>