Menu Structure
Menu Structure for Vertical layout
File: src/partials/left-sidebar.html
<!-- ========== Left Sidebar Start ========== -->
<div class="left-side-menu">
<div class="media user-profile mt-2 mb-2">
<img src="assets/images/users/avatar-7.jpg" class="avatar-sm rounded-circle mr-2" alt="Adminator" />
<img src="assets/images/users/avatar-7.jpg" class="avatar-xs rounded-circle mr-2" alt="Adminator" />
<div class="media-body">
<h6 class="pro-user-name mt-0 mb-0">Adminator</h6>
<span class="pro-user-desc">Administrator</span>
</div>
<div class="dropdown align-self-center profile-dropdown-menu">
<a class="dropdown-toggle mr-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
aria-expanded="false">
<span data-feather="chevron-down"></span>
</a>
<div class="dropdown-menu profile-dropdown">
...
</div>
</div>
</div>
<div class="sidebar-content">
<!--- Sidemenu -->
<div id="sidebar-menu" class="slimscroll-menu">
<ul class="metismenu" id="menu-bar">
<li class="menu-title">Navigation</li>
<li>
<a href="index.html">
<i data-feather="home"></i>
<span class="badge badge-success float-right">1</span>
<span> Dashboard </span>
</a>
</li>
...
...
...
<li>
<a href="javascript: void(0);">
<i data-feather="inbox"></i>
<span> Email </span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li>
<a href="email-inbox.html">Inbox</a>
</li>
<li>
<a href="email-read.html">Read</a>
</li>
<li>
<a href="email-compose.html">Compose</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- End Sidebar -->
<div class="clearfix"></div>
</div>
<!-- Sidebar -left -->
</div>
<!-- Left Sidebar End -->
Menu Structure for Horizontal layout
File: src/partials/horizontal-nav.html
<div class="navbar navbar-expand flex-column flex-md-row navbar-custom">
<div class="container-fluid">
<!-- LOGO -->
<a href="index.html" class="navbar-brand logo">
<span class="logo-lg">
...
</span>
<span class="logo-sm">
...
</span>
</a>
<a href="index.html" class="navbar-brand logo-dark">
<span class="logo-lg">
...
</span>
<span class="logo-sm">
...
</span>
</a>
<ul class="navbar-nav bd-navbar-nav flex-row list-unstyled menu-left mb-0">
<li class="">
<button class="button-menu-mobile open-left">
<i data-feather="menu" class="menu-icon"></i>
<i data-feather="x" class="close-icon"></i>
</button>
</li>
</ul>
<ul class="navbar-nav flex-row ml-auto d-flex list-unstyled topnav-menu float-right mb-0">
<li class="d-none d-md-block">
<div class="app-search">
<form>
...
</form>
</div>
</li>
<li class="d-inline-block d-md-none dropdown" data-toggle="tooltip" data-placement="left" title="Search">
<a class="nav-link dropdown-toggle mr-0" data-toggle="dropdown" href="javascript:void(0);" role="button"
aria-haspopup="false" aria-expanded="false">
<i data-feather="search"></i>
</a>
<div aria-labelledby="page-header-search-dropdown"
class="dropdown-menu dropdown-menu-lg dropdown-menu-right p-0">
<div class="app-search">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<i data-feather="search"></i>
</div>
</form>
</div>
</div>
</li>
<li class="fullscreen-toggle d-none d-lg-block" data-toggle="tooltip" data-placement="left" title="Fullscreen">
<a href="javascript:void(0);" class="nav-link">
<i data-feather="maximize"></i>
<i data-feather="minimize"></i>
</a>
</li>
<li class="dropdown d-none d-lg-block" data-toggle="tooltip" data-placement="left" title="Change language">
<a class="nav-link dropdown-toggle mr-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
aria-expanded="false">
<img alt="user-image" height="12" class="mr-2" src="assets/images/flags/us.jpg">
<span class="align-middle">US</span>
</a>
<div class="dropdown-menu dropdown-menu-right choose-language">
...
</div>
</li>
<li class="dropdown notification-list" data-toggle="tooltip" data-placement="left"
title="8 new unread notifications">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
aria-expanded="false">
<i data-feather="bell"></i>
<span class="noti-icon-badge"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-lg">
<!-- item-->
<div class="dropdown-item noti-title border-bottom">
<h5 class="m-0 font-size-16">
<span class="float-right">
<a href="" class="text-dark">
<small>Clear All</small>
</a>
</span>Notification
</h5>
</div>
<div class="slimscroll noti-scroll">
...
</div>
</div>
</li>
<li class="dropdown notification-list" data-toggle="tooltip" data-placement="left" title="Settings">
...
</li>
<li class="dropdown notification-list align-self-center profile-dropdown">
<a class="nav-link dropdown-toggle nav-user mr-0" data-toggle="dropdown" href="#" role="button"
aria-haspopup="false" aria-expanded="false">
<div class="media user-profile ">
<img src="assets/images/users/avatar-7.jpg" alt="user-image" class="rounded-circle align-self-center" />
<div class="media-body text-left">
<h6 class="pro-user-name ml-2 my-0">
<span>Adminator N</span>
<span class="pro-user-desc text-muted d-block mt-1">Administrator </span>
</h6>
</div>
<span data-feather="chevron-down" class="ml-2 align-self-center"></span>
</div>
</a>
<div class="dropdown-menu profile-dropdown-items dropdown-menu-right">
...
</div>
</li>
</ul>
</div>
</div>
<div class="topnav shadow-sm">
<div class="container-fluid">
<nav class="navbar navbar-light navbar-expand-lg topbar-nav">
<div class="collapse navbar-collapse" id="topnav-menu-content">
<ul class="metismenu" id="menu-bar">
<li>
<a href="index.html">
<i data-feather="home"></i>
<span> Dashboard </span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i data-feather="grid"></i>
<span>Apps</span>
<span class="menu-arrow"></span>
</a>
<ul class="nav-second-level" aria-expanded="false">
<li>
<a href="apps-calendar.html">Calendar</a>
</li>
...
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>