---
title: Side Nav
meta: Side navigation
layout: component.html
---
***
{{> 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";
```