<%= @page_title %>

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

---

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.

<%= code_example '

Filter:

All

Active

Pending

Suspended

', :html %>

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:

<%= code_example ' @import "foundation/variables", "foundation/components/global", "foundation/components/sub-nav"; ', :css %>

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:

<%= code_example ' /* Using the default styles */ .your-class-name { @include sub-nav; }', :css %>

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.

<%= code_example ' /* 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 ', :css %> <%= code_example ' /* Using customized options */ .your-class-name { @include sub-nav(orange, 11px, orange); } ', :css %>

Filter:

All

Active

Pending

Suspended

Default SCSS Variables

<%= code_example ' /* We use these to control margin and padding */ $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px); $sub-nav-list-padding-top: emCalc(4px); /* We use this to control the definition */ $sub-nav-font-size: emCalc(14px); $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: emCalc(3px) emCalc(9px); $sub-nav-active-cursor: $cursor-default-value;', :css %>

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