zurb-foundation-5

--- title: Side Nav meta: Side navigation --- <h3 class="subheader">Side nav, like you see on the Foundation docs, is a great way to provide navigation for your entire site, or for sections of an individual page.</h3> *** {{> examples_sidenav_basic}} *** <h3>Basic</h3> You can create a side nav using minimal markup. <div class="row"> <div class="large-6 columns"> <h4>HTML</h4> {{#markdown}} ```html {{> examples_sidenav_basic}} ``` {{/markdown}} </div> <div class="large-6 columns"> <h4>Rendered HTML</h4> {{> examples_sidenav_basic}} </div> </div> <h3>Advanced</h3> Additional classes can be added to your side nav to change its appearance. <div class="row"> <div class="large-6 columns"> <h4>HTML</h4> {{#markdown}} ```html {{> examples_sidenav_advanced}} ``` {{/markdown}} </div> <div class="large-6 columns"> <h4>Rendered HTML</h4> {{> examples_sidenav_advanced}} </div> </div> *** <h3>Accessibility</h3> Use this snippet to make side-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.) <div class="row"> <div class="large-6 columns"> <h4>HTML</h4> {{#markdown}} ```scss {{> examples_sidenav_accessible}} ``` {{/markdown}} </div> <div class="large-6 columns"> <h4>Rendered HTML</h4> {{> examples_sidenav_accessible_rendered}} </div> </div> **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. *** ## Customize with Sass The side nav can be easily customized using our Sass variables <h4>SCSS</h4> {{> examples_sidenav_variables}} *** ## Semantic Markup with Sass You can create your own sub nav with our Sass mixins. <h3>Basic</h3> You can use the `side-nav()` mixin to create your own sub nav, like so: <h4>SCSS</h4> {{#markdown}} ```scss .custom-side-nav { @include side-nav(); } ``` {{/markdown}} <h4>HTML</h4> {{#markdown}} ```html {{> examples_sidenav_mixin}} ``` {{/markdown}} <h3>Advanced</h3> You can further customize your side nav, like so: <h4>SCSS</h4> {{#markdown}} ```scss .custom-sidenav-class { @include side-nav( // Border color of divider $divider-color: '#ccc', // Font size of nav items $font-size:1.2em, // Color of navigation links $link-color:'#ccc', // Color of navigation links on hover $link-color-hover: '#444' ); } ``` {{/markdown}} <h4>HTML</h4> {{#markdown}} ```html {{> examples_sidenav_mixin}} ``` {{/markdown}} *** ##### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file: <h4>SCSS</h4> ```scss @import "foundation/components/side-nav"; ```