Vertical Menu Style

Introduction

In Pangong we provided you three type of menu style first one in Vertical navigation.

How to Setup

For vertical navigation you have to first add hk-vertical-nav class with hk-wrapper.

HTML Structure

<!-- HK Wrapper -->
<div class="hk-wrapper hk-vertical-nav">
......
......
<!-- Vertical Nav -->
<nav class="hk-nav hk-nav-dark">
	<a href="javascript:void(0);" id="hk_nav_close" class="hk-nav-close"><span class="feather-icon"><i data-feather="x"></i></span></a>
	<div class="nicescroll-bar">
		<div class="navbar-nav-wrap">
			<ul class="navbar-nav flex-column">
				<li class="nav-item active">
					<a class="nav-link" href="javascript:void(0);" data-toggle="collapse" data-target="#dash_drp">
						<span class="feather-icon"><i data-feather="activity"></i></span>
						<span class="nav-link-text">Dashboard</span>
					</a>
					<ul id="dash_drp" class="nav flex-column collapse collapse-level-1">
						<li class="nav-item">
							<ul class="nav flex-column">
								<li class="nav-item">
									<a class="nav-link" href="index.html">CRM</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="index2.html">Project</a>
								</li>
								<li class="nav-item active">
									<a class="nav-link" href="index3.html">Statistics</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="nav-item">
					<a class="nav-link link-with-badge" href="javascript:void(0);" data-toggle="collapse" data-target="#app_drp">
						<span class="feather-icon"><i data-feather="package"></i></span>
						<span class="nav-link-text">Application</span>
						<span class="badge badge-primary badge-pill">3</span>
					</a>
					<ul id="app_drp" class="nav flex-column collapse collapse-level-1">
						<li class="nav-item">
							<ul class="nav flex-column">
								<li class="nav-item">
									<a class="nav-link" href="chats.html">Chat</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="calendar.html">Calendar</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="email.html">Email</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				....
				....
				<li class="nav-item">
				....
				</li>
				<li class="nav-item">
				....
				</li>
			</ul>
			<hr class="nav-separator">
			....
			<ul class="navbar-nav flex-column">
				<li class="nav-item">
				....
				</li>
				<li class="nav-item">
					<a class="nav-link" href="https://hencework.ticksy.com/" target="_blank">
						<span class="feather-icon"><i data-feather="headphones"></i></span>
						<span class="nav-link-text">Support</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div id="hk_nav_backdrop" class="hk-nav-backdrop"></div>
<!-- /Vertical Nav -->

For light & dark menu you can add hk-nav-lightor hk-nav-darkwithhk-navclass.

For Scrollable Navigation please add scrollable-nav class with hk-wrapper.