Menu
Plugin dependency
This component requires BookingSync menu
and Bootstrap collapse
JS plugins.
<nav id="sidebar" class="menu menu-fixed flex-col">
<header class="menu-header">
<div class="menu-icon menu-header-icon">
<i class="bs-icon-bookingsync"></i>
</div>
<div class="menu-body menu-header-body">
<h4 class="menu-header-heading">Vacation Rentals</h4>
<small>
<a href="#menu-header-submenu"
data-toggle="collapse"
role="button"
aria-expanded="false"
aria-controls="menu-header-submenu"
class="collapsed">
Switch account
<span class="caret"></span>
</a>
</small>
</div>
<nav id="menu-header-submenu" class="collapse menu-header-submenu">
<ol>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
Bed and Breakfast
</div>
</a>
</li>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
City Apartments
</div>
</a>
</li>
</ol>
</nav>
</header>
<div class="menu-body flex-1">
<ol>
<li role="presentation" class="active">
<a href="#" class="menu-link">
<div class="menu-icon menu-link-icon">
<i class="icon-calendar"></i>
</div>
<div class="menu-body menu-link-body">
Bookings
</div>
</a>
</li>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-icon menu-link-icon">
<i class="icon-clients"></i>
</div>
<div class="menu-body menu-link-body">
Clients
</div>
</a>
</li>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-icon menu-link-icon">
<i class="icon-rental"></i>
</div>
<div class="menu-body menu-link-body">
Rentals
</div>
</a>
</li>
</ol>
</div>
<footer class="menu-footer">
<ol>
<li role="separator" class="divider"></li>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-icon menu-link-icon">
<i class="icon-applications"></i>
</div>
<div class="menu-body menu-link-body">
Apps
</div>
</a>
</li>
<li role="presentation">
<a href="#" class="menu-link" data-toggle="menu-expand"
data-menu="#sidebar" data-submenu="#sidebar-settings">
<div class="menu-icon menu-link-icon">
<i class="icon-settings"></i>
</div>
<div class="menu-body menu-link-body">
Settings
</div>
<div class="menu-caret">
<span class="caret-right"></span>
</div>
</a>
</li>
<li role="separator" class="divider"></li>
<li role="presentation">
<a href="#menu-footer-submenu"
data-toggle="collapse"
role="button"
aria-expanded="false"
aria-controls="menu-footer-submenu"
class="collapsed menu-link">
<div class="menu-icon menu-footer-icon">
<img src="http://lorempixel.com/100/100/people/9" alt="Jane Doe"
class="img-rounded">
</div>
<div class="menu-body menu-link-body">
Jane Doe
</div>
<div class="menu-caret">
<span class="caret"></span>
</div>
</a>
</li>
</ol>
<nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
<ol>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-icon menu-link-icon">
</div>
<div class="menu-body menu-link-body">
Help Center
</div>
</a>
</li>
<li role="separator" class="divider"></li>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-icon menu-link-icon">
</div>
<div class="menu-body menu-link-body">
Profile
</div>
</a>
</li>
<li role="presentation" class="active">
<a href="#" class="menu-link">
<div class="menu-icon menu-link-icon">
</div>
<div class="menu-body menu-link-body">
Logout
</div>
</a>
</li>
</ol>
</nav>
</footer>
</nav>
<nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
<header class="menu-header">
<div class="menu-body menu-header-body">
<h4 class="menu-header-heading">Settings</h4>
</div>
</header>
<div class="menu-body flex-1">
<ol>
<li role="presentation" class="active">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
General
</div>
</a>
</li>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
Payments
</div>
</a>
</li>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
Apps
</div>
</a>
</li>
</ol>
</div>
</nav>
Menu for Apps
Plugin dependency
This component requires BookingSync menu
and Bootstrap collapse
JS plugins.
<nav class="menu menu-fixed flex-col menu-submenu menu-app">
<header class="menu-header">
<div class="menu-body menu-header-body">
<h4 class="menu-header-heading">Awesome App</h4>
<small>
<a href="#menu-header-submenu"
data-toggle="collapse"
role="button"
aria-expanded="false"
aria-controls="menu-header-submenu"
class="collapsed">
San Francisco
<span class="caret"></span>
</a>
</small>
</div>
<nav id="menu-header-submenu" class="collapse menu-header-submenu">
<ol>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
French riviera
</div>
</a>
</li>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
New York
</div>
</a>
</li>
</ol>
</nav>
</header>
<div class="menu-body flex-1">
<ol>
<li role="presentation" class="active">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
General
</div>
</a>
</li>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
Payments
</div>
</a>
</li>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
Apps
</div>
</a>
</li>
</ol>
</div>
<footer class="menu-footer">
<ol>
<li role="separator" class="divider"></li>
<li role="presentation">
<a href="#menu-footer-submenu"
data-toggle="collapse"
role="button"
aria-expanded="false"
aria-controls="menu-footer-submenu"
class="collapsed menu-link">
<div class="menu-body menu-link-body">
Settings
</div>
<div class="menu-caret">
<span class="caret"></span>
</div>
</a>
</li>
</ol>
<nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
<ol>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
Help Center
</div>
</a>
</li>
<li role="presentation">
<a href="#" class="menu-link">
<div class="menu-body menu-link-body">
Videos
</div>
</a>
</li>
</ol>
</nav>
</footer>
</nav>