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

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

Accessibility

Use this snippet to make sub-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.)

SCSS

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

HTML

{{> examples_subnav_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. *** ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

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