Skip to main content Skip to docs navigation
View on GitHub

Bordered nav

The bordered nav builds on Bootstrap’s nav base styles with a new, bolder variation to nav links.

On this page

Examples

html
<ul class="nav nav-bordered">
  <li class="nav-item">
    <a class="nav-link active" href="#">Bold</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Minimal</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Components</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Docs</a>
  </li>
</ul>

Stacked

Bordered nav links can also be stacked.

html
<ul class="nav nav-bordered nav-stacked flex-column">
  <li class="nav-header">Examples</li>
  <li class="nav-item">
    <a class="nav-link active" href="#">Bold</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Minimal</a>
  </li>

  <li class="nav-header">Sections</li>

  <li class="nav-item">
    <a class="nav-link" href="#">Grid</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
</ul>

CSS

Sass variables

$nav-bordered-color:                 $nav-link-color;
$nav-bordered-color-active:          $primary;
$nav-bordered-font-weight:           700;
$nav-bordered-font-weight-active:    700;
$nav-bordered-border-width:          $border-width * 4;

$nav-bordered-divider-color:         rgba($white, .2);
$nav-bordered-divider-margin-top:    $spacer * 1.3;
$nav-bordered-divider-margin-bottom: $spacer * 1.6;