Side Navigation

Section 1

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.

<section class="sui-row-with-sidenav">

	<!-- Navigation -->
	<div role="navigation" class="sui-sidenav">

		<ul class="sui-vertical-tabs sui-sidenav-hide-md">

			<li class="sui-vertical-tab current">
			<a href="#" role="button"data-tab="tab-1">Tab 1</a>
			</li>

			<li class="sui-vertical-tab">
			<a href="#" role="button" data-tab="tab-2">Tab 2</a>
			<span class="sui-tag sui-tag-warning">4</span>
			</li>

			<li class="sui-vertical-tab">
			<a href="#" role="button" data-tab="tab-3">Tab 3</a>
			<span class="sui-icon-check-tick" aria-hidden="true"></span>
			</li>

		</ul>

		<div class="sui-sidenav-hide-lg">

			<select class="sui-select" style="display: none;">
				<option value="tab-1" selected="selected">Tab 1</option>
				<option value="tab-2">Tab 2</option>
				<option value="tab-3">Tab 3</option>
			</select>

		</div>

	</div>

	<!-- SECTION: Tab 1 (Current) -->
	<div class="sui-box">...</div>

	<!-- SECTION: Tab 2 -->
	<div class="sui-box" style="display: none;">...</div>

	<!-- SECTION: Tab 3 -->
	<div class="sui-box" style="display: none;">...</div>

</section>
"