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.



Basic

You can create a side nav using minimal markup.

HTML

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

Rendered HTML

Advanced

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

HTML

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

Rendered HTML


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 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";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »