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.

Filter:

All

Active

Pending

Suspended

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.

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

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:

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

<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";