<%= @page_title %>

Side nav, like you'll see on Foundation's main site, is useful for sections of either a site or a page.

---

Build With Predefined HTML Classes

There are two ways to build a side nav in Foundation 4: either with our predefined HTML classes or our mixins. Building side nav using our predefined classes is simple, you'll just need to write a <ul class="side-nav"> and fill it full of list items. The width of the side nav is controlled by the columns you put it inside.

The list item options:

• active Will add style to denote the active link.
• divider Creates a divider between list items.

<%= code_example '

• Link 1
• Link 2
• Link 3
• Link 4

', :html %>

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected side 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 side nav. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _global.scss and _side-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/side-nav"; ', :css %>

Quick Mixin

You can build your side 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 background color, which also controls the border and text color. You'll also have the ability to change the font-size and padding. 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 side-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 side-nav($divider-color, $font-size, $link-color); } /* Control the color of the divider between links */ $divider-color: $side-nav-divider-color /* Control your font-size per label */ $font-size: $side-nav-font-size /* Change the background color for your labels */ $link-color: $side-nav-link-color ', :css %>

• Link 1
• Link 2
• Link 3
• Link 4

Default SCSS Variables

<%= code_example ' /* We use this to control padding. */ $side-nav-padding: emCalc(14px) 0; /* We use these to control list styles. */ $side-nav-list-type: none; $side-nav-list-position: inside; $side-nav-list-margin: 0 0 emCalc(7px) 0; /* We use these to control link styles. */ $side-nav-link-color: $primary-color; $side-nav-link-color-active: lighten(#000, 30%); $side-nav-font-size: emCalc(14px); $side-nav-font-weight: bold; /* We use these to control border styles */ $side-nav-divider-size: 1px; $side-nav-divider-style: solid; $side-nav-divider-color: darken(#fff, 10%);', :css %>

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