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.

Build With Predefined HTML Classes

There are two ways to build sub nav in Foundation 4: you can use our predefined HTML classes or our mixins. Building sub nav using our predefined classes is simple, you'll just need to write a <dl class="sub-nav"> 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).

The list options:

  • <dt> Creates a title at the beginning of the list.
  • <dd class="active"> Will add style to denote the active link.
<dl class="sub-nav">
  <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>

To use these styles, make sure you have the default Foundation CSS package or that you've selected sub-nav from a custom package. These should be linked up following our default HTML page structure.

Build with our Mixins

We've included SCSS mixins used to style sub-nav. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _global.scss and _sub-nav.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/sub-nav";
Quick Mixin

You can build your sub-nav using our global mixin by including it on a custom class or ID in your own stylesheet. The mixin contains options for changing the font color, font size and active background color. The rest of the defaults can be modified using the available variables. The global mixin looks like this:

/* Using the default styles */
.your-class-name { @include sub-nav; }

There are also three options you can customize on the fly when writing this mixin. These controls things like: divider color, text size and font color.

/* Using the available options */
.your-class-name { @include sub-nav($font-color, $font-size, $active-bg); }

/* Control the color of the divider between links */
$font-color: $sub-nav-font-color

/* Control your font-size per label */
$font-size: $sub-nav-font-size

/* Change the background color for your labels */
$active-bg: $sub-nav-active-bg
/* Using customized options */
.your-class-name { @include sub-nav(orange, 11px, orange); }
Default SCSS Variables
$include-html-nav-classes: $include-html-classes;

/* We use these to control margin and padding */
$sub-nav-list-margin: em-calc(-4 0 18);
$sub-nav-list-padding-top: em-calc(4);

/* We use this to control the definition */
$sub-nav-font-size: em-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: em-calc(3 9);
$sub-nav-active-cursor: default;

/* We use these to the item divider */
$sub-nav-item-divider: "";
$sub-nav-item-divider-margin: emCalc(12);

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...


This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.


This modal has video