Sidebars
Clear Cooki! To check best result clear your cache and cookie.
Sidebar
There are sidebar with multiple colors and styles that you can preview with Personalization ❤️.
Clear your cookie to preview this page.
<div class="row">
<div class="col-12 col-md-6 col-lg-4 col-xl-3 height-300 mb-3">
<!-- Standard sidebar -->
<div class="adminuiux-sidebar">
<div class="adminuiux-sidebar-inner">
<ul class="nav flex-column menu-active-line my-3 ">
<!-- investment sidebar -->
<li class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="grid"></i>
<span class="menu-name">Dashboard</span>
</a>
</li>
<li class="nav-item dropdown">
<a href="javascrit:void(0)" class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown">
<i class="menu-icon" data-feather="calendar"></i>
<span class="menu-name">Schedule</span>
</a>
<div class="dropdown-menu">
<div class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="calendar"></i>
<span class="menu-name">Schedule Calendar</span>
</a>
</div>
<div class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="user-check"></i>
<span class="menu-name">Schedule Staff</span>
</a>
</div>
</div>
</li>
<li class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="users"></i>
<span class="menu-name">Patients</span>
</a>
</li>
</ul>
</ul>
<div class=" mt-auto "></div>
<!-- User account -->
<ul class="nav flex-column menu-active-line">
<!-- bottom sidebar menu -->
<li class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="message-circle"></i>
<span class="menu-name">Chat & Calls</span>
</a>
</li>
<li class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="settings"></i>
<span class="menu-name">Settings</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 height-300 mb-3 adminuiux-sidebar-fill-bg">
<!-- Standard sidebar -->
<div class="adminuiux-sidebar">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 height-300 mb-3 adminuiux-sidebar-fill-theme">
<!-- Standard sidebar -->
<div class="adminuiux-sidebar">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 height-300 mb-3 adminuiux-sidebar-fill-accent">
<!-- Standard sidebar -->
<div class="adminuiux-sidebar">
</div>
</div>
</div>
Sidebar Styles
<div class="row">
<div class="col-12 col-md-6 col-lg-4 col-xl-3 height-300 mb-3">
<!-- Standard sidebar -->
<div class="adminuiux-sidebar">
<div class="adminuiux-sidebar-inner">
<ul class="nav flex-column menu-active-line my-3 ">
<!-- investment sidebar -->
<li class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="grid"></i>
<span class="menu-name">Dashboard</span>
</a>
</li>
<li class="nav-item dropdown">
<a href="javascrit:void(0)" class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown">
<i class="menu-icon" data-feather="calendar"></i>
<span class="menu-name">Schedule</span>
</a>
<div class="dropdown-menu">
<div class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="calendar"></i>
<span class="menu-name">Schedule Calendar</span>
</a>
</div>
<div class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="user-check"></i>
<span class="menu-name">Schedule Staff</span>
</a>
</div>
</div>
</li>
<li class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="users"></i>
<span class="menu-name">Patients</span>
</a>
</li>
</ul>
</ul>
<div class=" mt-auto "></div>
<!-- User account -->
<ul class="nav flex-column menu-active-line">
<!-- bottom sidebar menu -->
<li class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="message-circle"></i>
<span class="menu-name">Chat & Calls</span>
</a>
</li>
<li class="nav-item">
<a href="javascrit:void(0)" class="nav-link">
<i class="menu-icon" data-feather="settings"></i>
<span class="menu-name">Settings</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 height-300 mb-3 adminuiux-sidebar-fill-bg">
<!-- Standard sidebar -->
<div class="adminuiux-sidebar">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 height-300 mb-3 adminuiux-sidebar-fill-theme">
<!-- Standard sidebar -->
<div class="adminuiux-sidebar">
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 height-300 mb-3 adminuiux-sidebar-fill-accent">
<!-- Standard sidebar -->
<div class="adminuiux-sidebar">
</div>
</div>
</div>