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>

Accessibility

Use this snippet to make side-nav more accessible. Adding the role attribute gives context to a screen reader. Using the Tab button, a user can navigate until they've reached the link below. (Use Shift+Tab to navigate back one step.)

 <ul class="side-nav" role="navigation" title="Link List">
   <li role="menuitem"><a href="#">Link 1</a></li>
   <li role="menuitem"><a href="#">Link 2</a></li>
   <li role="menuitem"><a href="#">Link 3</a></li>
   <li role="menuitem"><a href="#">Link 4</a></li>
 </ul>

Note: It is bad practice to leave links that do not go anywhere on your live site. Use something like foo.html to fill them as you build.

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($side-nav-link-color, $lightness: 30%);
$side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
$side-nav-font-size: rem-calc(14);
$side-nav-font-weight: normal;
$side-nav-font-weight-active: $side-nav-font-weight;
$side-nav-font-family: $body-font-family;
$side-nav-font-family-active: $side-nav-font-family;

// 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',
    // Color of navigation links on active
    $link-color-active: '#444',
    // Color of navigation links on hover
    $link-color-hover: '#444'
  );
}

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";