--- title: Sub navigation layout: doc/layouts/default.html --- # Sub Nav

This simple sub nav is great for moving between different states of a page. We use these frequently to show iterations of something, typically by date, but they're also handy for filters like these.

*** *** ## Basic Add a `.sub-nav` class to a `dl` element and fill it full of definitions. You can use the definition title as a label at the beginning (useful for building filters on a page). Add a title to the beginning of your list with the `dt` element. Add an `.active` class to a `dd` element to give it the active style.

HTML

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

Rendered HTML

{{> examples_subnav_basic}}
*** ## Customize With Sass Sub Navs can be easily customized using our provided Sass variables.

SCSS

{{> examples_subnav_variables}} *** ## Semantic Markup With Sass You apply Sub Nav styles to semantic markup using Sass mixins.

Basic

You can use the `sub-nav()` mixin to create your own sub nav with semantic markup, like so:

SCSS

{{#markdown}} ```scss .your-class-name { @include sub-nav(); } ``` {{/markdown}}

HTML

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

Advanced

You can further customize your alert boxes using the provided options in the `sub-nav()` mixin:

SCSS

```scss .your-class-name { @include sub-nav( // Control the color of the divider between links. $font-color: $primary-color, // Control your font-size per label. $font-size: rem-calc(14), // Change the background color for your labels $active-bg: $primary-color ); } ``` **Note:** `rem-calc();` is a function we wrote to convert `px` to `rem`. It is included in **_variables.scss**. *** ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

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