Navigation Styles

This add-on requires the breakpoint() mixin in order for the SASS or LESS files to compile without modification.

Dropdown

Adding .nav-dropdown automatically turns a nested navigation list into a dropdown.

<nav class="nav-dropdown">
  <ul class="list-inline">
    <li>...</li>
  </ul>
</nav>

Vertical Navigation

Default

The .nav-vertical class allows you to stack navigation list items in a vertical manner.

<nav class="nav-vertical">
  <ul>
    <li><a>...</a></li>
  </ul>
</nav>

Adding a border

Simply adding the class .nav-bordered to your vertical navigation will add a border around the entire element as as a hover effect for each list item.

<nav class="nav-vertical nav-bordered">
  <ul>
    <li><a>...</a></li>
  </ul>
</nav>

Adding a line

In the preview, .nav-line has been added to our vertical navigation to add a border beneath our list items.

<nav class="nav-vertical nav-bordered nav-line">
  <ul>
    <li><a>...</a></li>
  </ul>
</nav>

Dropdowns

jQuery dropdowns can be easily added to vertical navigation to display content. Dropdowns will display to the right of the vertical navigation menu by default.

The icons used here are from a modified version of the Font Awesome icon font library.

<nav class="nav-vertical nav-bordered nav-line">
  <ul>
    <li>
      <a href="#">...</a>
      <span class="icon th-list float-right"></span>
    </li>
    <li class="dropdown">
      <a href="#">...</a>
      <span class="icon chevron-right float-right"></span>
      <ul class="dropdown-menu">
        <li>Settings</li>
        <li>Privacy</li>
      </ul>
    </li>
    <li>
      <a href="#">...</a>
      <span class="icon power-off float-right"></span>
    </li>
  </ul>
</nav>

Download