Navigation Sidebar Column
Stack includes support for a sidebar column navigation the left, or right of the page
Explore all of Stack's modular elements
at the Element Index Page →
Sidebar Column Markup
As with all other navigation types in Stack, the sidebar column element should reside inside the .nav-containerelement, with the additional class .nav-container--sidebarbeing required to correctly disperse the space on the page.
The sidebar column navigation itself should have the class .nav-sidebar-columnand can be filled out with whatever content is required. Proceeding the nav-sidebar-column is the .nav-sidebar-column-togglewhich allows the sidebar navigation to be shown on smaller screen sizes.
The markup snippet below is all that's required to set up a sidebar column navigation on the page (the contents of the sidebar is represented by '...':
<div class="nav-container nav-container--sidebar"> <div class="nav-sidebar-column"> ... </div> <div class="nav-sidebar-column-toggle visible-xs visible-sm" data-toggle-class=".nav-sidebar-column;active"> <i class="stack-menu"></i> </div></div>
Switching Column Sides
Simply add the class .nav-container--rightto the .nav-containerelement to switch the sidebar column to the right of the page.
<div class="nav-container nav-container--sidebar nav-container--right"> <div class="nav-sidebar-column"> ... </div> <div class="nav-sidebar-column-toggle visible-xs visible-sm" data-toggle-class=".nav-sidebar-column;active"> <i class="stack-menu"></i> </div></div>