--- title: Side Nav meta: Side navigation layout: component.html ---

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.

*** {{> examples_sidenav_basic}} ***

Basic

You can create a side nav using minimal markup.

HTML

{{#markdown}} ```html {{> examples_sidenav_basic}} ``` {{/markdown}}

Rendered HTML

{{> examples_sidenav_basic}}

Advanced

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

HTML

{{#markdown}} ```html {{> examples_sidenav_advanced}} ``` {{/markdown}}

Rendered HTML

{{> examples_sidenav_advanced}}
***

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

HTML

{{#markdown}} ```scss {{> examples_sidenav_accessible}} ``` {{/markdown}}

Rendered HTML

{{> examples_sidenav_accessible_rendered}}
**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

{{> examples_sidenav_variables}} *** ## 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

{{#markdown}} ```scss .custom-side-nav { @include side-nav(); } ``` {{/markdown}}

HTML

{{#markdown}} ```html {{> examples_sidenav_mixin}} ``` {{/markdown}}

Advanced

You can further customize your side nav, like so:

SCSS

{{#markdown}} ```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' ); } ``` {{/markdown}}

HTML

{{#markdown}} ```html {{> examples_sidenav_mixin}} ``` {{/markdown}} *** ##### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

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