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

<dl class="sub-nav"> <dt>Filter:</dt> <dd class="active"><a href="#">All</a></dd> <dd><a href="#">Active</a></dd> <dd><a href="#">Pending</a></dd> <dd><a href="#">Suspended</a></dd> </dl>

Rendered HTML


Customize with Sass

Sub Navs can be easily customized using our provided Sass variables.

SCSS

$include-html-nav-classes: $include-html-classes; // We use these to control margin and padding $sub-nav-list-margin: rem-calc(-4 0 18); $sub-nav-list-padding-top: rem-calc(4); // We use this to control the definition $sub-nav-font-size: rem-calc(14); $sub-nav-font-color: #999; $sub-nav-font-weight: normal; $sub-nav-text-decoration: none; $sub-nav-border-radius: 1000px; // We use these to control the active item styles $sub-nav-active-font-weight: bold; $sub-nav-active-bg: $primary-color; $sub-nav-active-color: #fff; $sub-nav-active-padding: rem-calc(3 9); $sub-nav-active-cursor: default; // We use these to the item divider $sub-nav-item-divider: ""; $sub-nav-item-divider-margin: rem-calc(12);

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

.your-class-name { @include sub-nav(); }

HTML

<dl class="your-class-name"> <dt>Filter:</dt> <dd class="active"><a href="#">All</a></dd> <dd><a href="#">Active</a></dd> <dd><a href="#">Pending</a></dd> <dd><a href="#">Suspended</a></dd> </dl>

Advanced

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

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

@import "foundation/components/sub-nav";
Stay on top of what’s happening in responsive design.

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