View on GitHub

Icon nav

The icon nav is a special sidebar navigation for this toolkit. In mobile viewports, the icon nav is horizontal with icons and textual labels. On larger devices the icon nav changes and becomes affixed to the side of the viewport with tooltips instead of textual labels.

On this page

Examples

html

<nav class="nav-icon">
  <a class="nav-icon-brand" href="#">
    <span class="icon nav-icon-brand-icon">
      <img src="/docs/assets/img/examples/8s.svg" class="img-fluid" alt="Brand">
    </span>
  </a>
  <div class="nav-icon-slider">
    <ul class="nav nav-pills nav-icon-nav flex-md-column">
      <li class="nav-item">
        <a class="nav-link" href="#" title="Overview" data-toggle="tooltip" data-placement="right" data-container="body">
          <span class="icon">
            <img src="/docs/assets/img/examples/house.svg" alt="Home">
          </span>
          <small class="nav-icon-nav-label d-md-none">Overview</small>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" title="Order history" data-toggle="tooltip" data-placement="right" data-container="body">
          <span class="icon">
            <img src="/docs/assets/img/examples/file-text.svg" alt="Text document">
          </span>
          <small class="nav-icon-nav-label d-md-none">History</small>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#" title="Docs" data-toggle="tooltip" data-placement="right" data-container="body">
          <span class="icon">
            <img src="/docs/assets/img/examples/list.svg" alt="List">
          </span>
          <small class="nav-icon-nav-label d-md-none">Docs</small>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" title="Signed in as mdo" data-toggle="tooltip" data-placement="right" data-container="body">
          <img src="/docs/assets/img/examples/avatar-mdo.png" alt="@mdo avatar" class="rounded-circle">
          <small class="nav-icon-nav-label d-md-none">@mdo</small>
        </a>
      </li>
    </ul>
  </div>
</nav>

CSS

Sass variables

$nav-icon-bg:                    $gray-subtle;
$nav-icon-border-color:          $white;
$nav-icon-margin-top:            0;
$nav-icon-margin-bottom:         0;
$nav-icon-margin-top-sm:         -($spacer * 1.3);
$nav-icon-margin-bottom-sm:      $spacer * 1.9;
$nav-icon-width:                 $spacer * 4.4;
$nav-icon-brand-color:           $gray-subtle;
$nav-icon-brand-hover-color:     inherit;
$nav-icon-brand-bg:              $primary;
$nav-icon-brand-padding-y:       $spacer * 1.3;
$nav-icon-brand-padding-y-sm:    $nav-icon-brand-padding-y * .5;
$nav-icon-brand-font-size:       $font-size-base * 1.1;
$nav-icon-brand-icon-font-size:  $nav-icon-brand-font-size * 1.7;
$nav-icon-link-color:            inherit;
$nav-icon-link-active-color:     $gray-700;
$nav-icon-link-active-bg:        $nav-icon-border-color;
$nav-icon-link-border-width:     $border-width;
$nav-icon-link-border-color:     $nav-icon-border-color;
$nav-icon-link-img-width:        $spacer * 1.6;
$nav-icon-label-top:             $spacer * .5;
$nav-icon-label-right:           $spacer * .8;
$nav-icon-label-padding-x:       $spacer * .4;
$nav-icon-label-padding-y:       $spacer * .2;
$nav-icon-label-font-size:       $font-size-sm * .8;
$nav-icon-label-border-width:    $border-width * 2;
$nav-icon-label-border-radius:   $border-radius-lg * 2.1;
$nav-icon-nav-link-padding:      $spacer * .9;
$nav-icon-nav-link-padding-x-sm: $spacer * .8;
$nav-icon-nav-link-padding-y-sm: $spacer * .7;
$nav-icon-nav-link-font-size:    $font-size-base * 1.1;