Navs

<nav class="iconav iconav-inverse">
  <a class="iconav-brand" href="#">
    <i class="ion-cube"></i>
  </a>
  <div class="nav-slider">
    <ul class="nav iconav-nav flex-md-column">
      <li class="nav-item">
        <a class="nav-link" href="#" title="Dashboard" data-toggle="tooltip" data-placement="right" data-container="body">
          <i class="ion-home"></i>
          <span class="nav-link-label d-md-none">Dashboard</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" title="Statistics" data-toggle="tooltip" data-placement="right" data-container="body">
          <i class="ion-stats-bars"></i>
          <span class="nav-link-label d-md-none">Statistics</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#" title="World map" data-toggle="tooltip" data-placement="right" data-container="body">
          <i class="ion-map"></i>
          <span class="nav-link-label d-md-none">World map</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" title="Metrics" data-toggle="tooltip" data-placement="right" data-container="body">
          <i class="ion-pie-graph"></i>
          <span class="nav-link-label d-md-none">Metrics</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" title="Edit theme" data-toggle="tooltip" data-placement="right" data-container="body">
          <i class="ion-code"></i>
          <span class="nav-link-label d-md-none">Edit theme</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" title="Settings" data-toggle="tooltip" data-placement="right" data-container="body">
          <i class="ion-gear-a"></i>
          <span class="nav-link-label d-md-none">Settings</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" title="Support" data-toggle="tooltip" data-placement="right" data-container="body">
          <i class="ion-help-buoy"></i>
          <span class="nav-link-label d-md-none">Support</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" title="Sign out" data-toggle="tooltip" data-placement="right" data-container="body">
          <i class="ion-power"></i>
          <span class="nav-link-label d-md-none">Sign out</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

<nav class="iconav">
  <a class="iconav-brand" href="#">
    <i class="ion-cube"></i>
  </a>
  <div class="nav-slider">
    <ul class="nav iconav-nav flex-md-column">
      <li class="nav-item">
        <a class="nav-link" href="#" title="Dashboard" data-toggle="tooltip" data-placement="right" data-container="body">
          <i class="ion-home"></i>
          <span class="nav-link-label d-md-none">Dashboard</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" title="Statistics" data-toggle="tooltip" data-placement="right" data-container="body">
          <i class="ion-stats-bars"></i>
          <span class="nav-link-label d-md-none">Statistics</span>
        </a>
      </li>
      ...
    </ul>
  </div>
</nav>

<ul class="nav nav-bordered">
  <li class="nav-item">
    <a class="nav-link active" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Settings</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Account</a>
  </li>
</ul>

<ul class="nav nav-bordered nav-vertical flex-md-column">
  <li class="nav-header">Examples</li>
  <li class="nav-item">
    <a class="nav-link active" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Settings</a>
  </li>
  <li class="nav-header">Admin</li>
  <li class="nav-item">
    <a class="nav-link" href="#">Account</a>
  </li>
</ul>