1. Admin
  2. Dashboard
  3. Components
  4. Multilevels Side Menu

Multilevels Side Menu

Multilevels side menu used in Bemat Admin

Structure

The HTML structure is pretty simple: the side menu consists of a series of unordered lists nested one inside the other.

Example HTML Code:

<nav id="sidebar">
	<ul>
		<li>
			<a href="#">
				<span class="menu-item-ico"><i class="material-icons">dashboard</i></span>
				<span class="menu-item-name">Principal Parent Item</span>
			</a>
		</li>
		<li class="nav-main-heading">
			<span class="sidebar-mini-hide">Menu Heading</span>
		</li>
		<li>
			<a href="">
				<span class="menu-item-ico"><i class="material-icons">format_align_left</i></span>
				<span class="menu-item-name">Second Parent Menu Item</span>
			</a>
			<ul>
				<li><a href="">Level 2</a></li>
				<li>
					<a href="">This item has a submenu <span class="badge badge-primary">3</span></a>
					<ul>
						<li><a href="">Level 3-1</a></li>
						<li><a href="">Level 3-2</a></li>
						<li><a href="">Level 3-3</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</nav>

Create a submenu

First Level Submenu Example HTML Code:

<li>
	<a href="">
		<span class="menu-item-ico"><i class="material-icons">format_align_left</i></span>
		<span class="menu-item-name">First Level Submenu</span>
	</a>
	<ul>
		<li><a href="">Level 2-1</a></li>
		<li><a href="">Level 2-2</a></li>
		<li><a href="">Level 2-3</a></li>
	</ul>
</li>

Second Level Submenu Example HTML Code:

<li>
	<a href="">Second Level Submenu <span class="badge badge-primary">3</span></a>
	<ul>
		<li><a href="">Level 3-1</a></li>
		<li><a href="">Level 3-2</a></li>
		<li><a href="">Level 3-3</a></li>
	</ul>
</li>