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 class="hide-for-small-only"><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.

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

 <dl class="sub-nav" role="menu" title="Filter Menu List">
    <dt>Filter:</dt>
    <dd class="active" role="menuitem"><a href="#">All</a></dd>
    <dd role="menuitem"><a href="#">Active</a></dd>
    <dd role="menuitem"><a href="#">Pending</a></dd>
    <dd role="menuitem"><a href="#">Suspended</a></dd>
  </dl>

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

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