With supporting text below as a natural lead-in to additional content.

Drawer

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.

Drawer Types

Four directions are available: Right, Left.

Drawer Overlay Drawer Push Drawer push full

														
<!-- Drawer Overlay -->
<a class="btn btn-primary drawer-toggle-link" data-target="#drawer_overlay" data-drawer="overlay" data-backdrop="active" href="javascript:void(0);">Drawer Overlay</a>															
<div id="drawer_overlay" class="hk-drawer drawer-right">
	<div class="drawer-header">
		<div class="drawer-text">Drawer Overlay</div>
		<button type="button" class="drawer-close btn-close">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="drawer-body">
		<div data-simplebar class="nicescroll-bar">
			<div class="drawer-content-wrap">
				<p>With supporting text below as a natural lead-in to additional content.</p>
			</div>
		</div>
	</div>
	<div class="drawer-footer">
		<p class="p-xs">Footer text</p>
	</div>
</div>

<!-- Drawer Push -->
<a class="btn btn-primary drawer-toggle-link" data-target="#drawer_push"  data-drawer="push-normal" href="javascript:void(0);">Drawer Push</a>
<div id="drawer_push_nav_right" class="hk-drawer drawer-right">
	<div class="drawer-header">
		<div class="drawer-text">Drawer push with Nav</div>
		<button type="button" class="drawer-close btn-close">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="drawer-body">
		<div data-simplebar class="nicescroll-bar">
			<div class="drawer-content-wrap">
				<p>With supporting text below as a natural lead-in to additional content.</p>
			</div>
		</div>
	</div>
</div>

<!-- Drawer Push Full -->
<a class="btn btn-primary drawer-toggle-link" data-target="#drawer_push_nav" data-drawer="push-wth-nav" href="javascript:void(0);">Drawer push full</a>
<div id="drawer_push_nav" class="hk-drawer drawer-right">
<div class="drawer-header">
	<div class="drawer-text">Drawer push with Nav</div>
	<button type="button" class="drawer-close btn-close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>
<div class="drawer-body">
	<div data-simplebar class="nicescroll-bar">
		<div class="drawer-content-wrap">
			<p>With supporting text below as a natural lead-in to additional content.</p>
		</div>
	</div>
</div>
</div>

Class	Values
`hk-drawer drawer-"[value]"`	left / right

Name	Values	description
`data-drawer="[value]"`	overlay / push-normal / push-wth-nav	Actives the drawer functionality
`data-backdrop="[value]"`	active	Actives the overlay's backdrop

Direction

Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.

Preview
HTML

Drawer Overlay Left Drawer Overlay Right Drawer Push Left Drawer push Right Drawer Push Nav Left Drawer push Nav Right

														
<!-- Drawer Overlay Left -->
<div id="drawer_overlay_left" class="hk-drawer drawer-left">
	...
</div>
<!-- /Drawer Overlay Left -->

<!-- Drawer Overlay Right -->
<div id="drawer_overlay_right" class="hk-drawer drawer-right">
	...
</div>
<!-- /Drawer Overlay Right -->

<!-- Drawer Push Right -->
<div id="drawer_push" class="hk-drawer drawer-small drawer-right">
	...
</div>
<!-- /Drawer Push Right -->

<!-- Drawer Push Left -->
<div id="drawer_push_left" class="hk-drawer drawer-small drawer-left">
	...
</div>
<!-- /Drawer Push Left -->

<!-- Drawer Push Right -->
<div id="drawer_push_right" class="hk-drawer drawer-small drawer-right">
	...
</div>
<!-- /Drawer Push Right -->

<!-- Drawer Push Right -->
<div id="drawer_push_nav" class="hk-drawer drawer-right">
	...
</div>
<!-- /Drawer Push Right -->

<!-- Drawer Push Left -->
<div id="drawer_push_nav_left" class="hk-drawer drawer-left">
	...
</div>
<!-- /Drawer Push Left -->

Drawer Types
Direction