Navigation Sidebar Column

Sidebar Column Markup

As with all other navigation types in Stack, the sidebar column element should reside inside the .nav-container element, with the additional class .nav-container--sidebar being required to correctly disperse the space on the page.

The sidebar column navigation itself should have the class .nav-sidebar-column and can be filled out with whatever content is required. Proceeding the nav-sidebar-column is the .nav-sidebar-column-toggle which 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--right to the .nav-container element 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>