ux-sidenav

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.

Read Foundation's sidenav.html docs for more details.

Example markup:


    Link 1
    Link 2
    
    Link 3
    Link 4

Use Cases Manifest
Use case: Data driven use case
    {{#events.uxSidenav_81}}
  • {{this}}
  • {{/}}

	{
     "title": "Sidenav demo navigation",
     "items": [
         {
             "isHeading": true,
             "label": "Test Heading"
         },
         {
             "active": true,
             "label": "Link 1",
             "href": "/path/to/link1"
         },
         {
             "label": "Link 2",
             "href": "/path/to/link2"
         },
         {
             "isDivider": true
         },
         {
             "label": "Link 3",
             "href": "/path/to/link3"
         },
         {
             "label": "Link 4",
             "href": "/path/to/link4"
         }
     ]
 }

Semantic Data Model
title - For accessibility - define the title of this navigation element.
items - Array of objects - see use case for example.