# Vertical Menu Style

## Introduction

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

<div align="left"><img src="/files/-LS8iOm7TtZXQAVp5CA1" alt=""></div>

## How to Setup

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

### **HTML Structure**

```markup
<!-- 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 -->

```

{% hint style="info" %}
For light & dark menu you can add `hk-nav-light`or `hk-nav-dark`with`hk-nav`class.
{% endhint %}

{% hint style="success" %}
For Scrollable Navigation please add `scrollable-nav` class with `hk-wrapper`.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hencework.gitbook.io/pangong/menu-styles-1/vertical-navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.