Side Nav

Side nav, like you see on the Foundation docs, is a great way to provide navigation for your entire site, or for sections of an individual page.

• Link 1
• Link 2
• Link 3
• Link 4

Basic

You can create a side nav using minimal markup.

<ul class="side-nav">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

Advanced

Additional classes can be added to your side nav to change its appearance.

<ul class="side-nav">
  <li class="active"><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="divider"></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

Customize With Sass

The side nav can be easily customized using our Sass variables

SCSS

$include-html-nav-classes: $include-html-classes;

// We use this to control padding.
$side-nav-padding: rem-calc(14 0);

// We use these to control list styles.
$side-nav-list-type: none;
$side-nav-list-position: inside;
$side-nav-list-margin: rem-calc(0 0 7 0);

// We use these to control link styles.
$side-nav-link-color: $primary-color;
$side-nav-link-color-active: scale-color(#000, $lightness: 30%);
$side-nav-font-size: rem-calc(14);
$side-nav-font-weight: bold;

// We use these to control border styles
$side-nav-divider-size: 1px;
$side-nav-divider-style: solid;
$side-nav-divider-color: scale-color(#fff, $lightness: -10%);

Semantic Markup With Sass

You can create your own sub nav with our Sass mixins.

Basic

You can use the side-nav() mixin to create your own sub nav, like so:

SCSS

.custom-side-nav {
  @include side-nav();
}

HTML

<ul class="custom-side-nav">
  <li class="active"><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="divider"></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

Advanced

You can further customize your side nav, like so:

SCSS

.custom-sidenav-class {
  @include side-nav(
    // Border color of divider
    $divider-color: '#ccc',
    // Font size of nav items
    $font-size:1.2em,
    // Color of navigation links
    $link-color:'#ccc';
  );
}

HTML

<ul class="custom-side-nav">
  <li class="active"><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="divider"></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/side-nav";