Side navigation

A simple but very extendable vertical navigation. One quick example is the side bar you see on the right.

Building the markup

The side navigation is formed with a ul element, but you can use a nav tag if you feel a little bit more wild.

  
  <ul class="navigation">
      <li class="header">A header</li>
      <li><a href="#">A link</a></li>
      <li><a href="#">A link</a></li>
      <li><a href="#">A link</a></li>
      <li><a href="#">A link</a></li>
      <li class="divider"></li>
      <li class="header">Another header</li>
      <li><a href="#">A link</a></li>
      <li><a href="#">A link</a></li>
  </ul>

Side navigation components

All right, and what is the special thing about this navigation?. Our experience tell us that the navigation should have several elements to make them fully functional.

Navigation header

This is really useful when you want to group a set of items into one category, like a navigation or plugins category.

   
  <ul class="navigation">
      <li class="header">A header</li>
  </ul>

Navigation active state

This essential feature is for telling the user where are they standing up, just by setting the link color to blue or highlighted with a background color.

   
  <ul class="navigation">
      <li class="active"><a href="#">A link</a></li>
  </ul>

Navigation divider

To add a simple divider for your navigation is really simple, just add the divider class name to a list item and you are good to go.

   
  <ul class="navigation">
      <li class="header">A header</li>
      <li class="active"><a href="#">A link</a></li>
      <li class="divider"></li>
      <li class="header">Another header</li>
      <li><a href="#">A link</a></li>
  </ul>

Available sass variables

Feel the navigation is to simple, try customize it with the sass variables we provide.

     
//Navigation settings
$navigation-style-type: none !default;
$navigation-list-position: inside !default;
$navigation-padding: 1rem 0 !default;
$navigation-link-color: #777 !default;

//Navigation list items
$navigation-list-item-font-size: 0.9rem !default;
$navigation-list-item-margin-bottom: 0.1 !default;
$navigation-list-item-active-color: #08C !default;
$navigation-list-link-hover-color: $navigation-list-item-active-color !default;
$navigation-list-link-hover-text-decoration: none !default;
$navigation-list-link-padding: 0.333rem 0 !default;
$navigation-list-link-display: inline-block !default;

//Navigation list header
$navigation-header-text-transform: uppercase !default;
$navigation-header-padding: 0.333rem 0 !default;
$navigation-header-color: #333 !default;
$navigation-header-font-size: 0.85714286rem !default;

//Navigation divider
$navigation-divider-border-width: 1px !default;
$navigation-divider-border-color: #EFEFEF !default;
$navigation-divider-margin: 8px 0 !default;

Search for documentation