> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/menu-styles-1/horizontal-navigation.md).

# Horizontal Menu Style

## Introduction

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

![](/files/-LS8koT8GXkFKsCAfmNH)

## How to Setup

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

### **HTML Structure**

```markup
<!-- HK Wrapper -->
<div class="hk-wrapper hk-horizontal-nav">
......
......
<!--Horizontal 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-row">
				<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 active">
									<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">
									<a class="nav-link" href="index3.html">Statistics</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				....
				....
				<li class="nav-item">
					....
				</li>

				<li class="nav-item">
					....
				</li>
				<li class="nav-item">
					<a class="nav-link" href="https://hencework.gitbook.io/pangong/" target="_blank">
						<span class="feather-icon"><i data-feather="book"></i></span>
						<span class="nav-link-text">Documentation</span>
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link link-with-badge" href="https://hencework.gitbook.io/pangong/changelog" target="_blank">
						<span class="feather-icon"><i data-feather="eye"></i></span>
						<span class="nav-link-text">Changelog</span>
						<span class="badge badge-success badge-sm badge-pill">v 1.0</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div id="hk_nav_backdrop" class="hk-nav-backdrop"></div>
<!--/Horizontal 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 %}

##