Left Navigation
Copy
<div class="row">
<div class="sidebar position-static">
<ul class="sidebar-nav" id="sidebar-nav">
<li class="nav-item">
<a class="nav-link collapsed" href="">
<i class="bi bi-grid"></i>
<span>Home screen </span>
</a>
</li>
<li class="nav-item">
<a class="nav-link collapsed " href="">
<i class="bi bi-box-arrow-in-right"></i>
<span>Home screen</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link collapsed " href="">
<i class="bi bi-file-font"></i>
<span>Home screen</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#left-nav1" data-bs-toggle="collapse" href="#" aria-expanded="false">
<i class="bi bi-layout-text-window-reverse"></i><span>Home screen</span><i class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="left-nav1" class="nav-content collapse" data-bs-parent="#left-nav1">
<li>
<a href="">
<span>Home screen - A</span>
</a>
</li>
<li>
<a href="">
<span>Home screen - B</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#left-nav2" data-bs-toggle="collapse" href="#" aria-expanded="false">
<i class="bi bi-bar-chart"></i><span>Home screen</span><i class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="left-nav2" class="nav-content collapse" data-bs-parent="#left-nav2">
<li>
<a href="">
<span>Home screen - A </span>
</a>
</li>
<li>
<a href="">
<span>Home screen - B</span>
</a>
</li>
<li>
<a href="">
<span>Home screen - C</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#left-nav3" data-bs-toggle="collapse" href="#" aria-expanded="false">
<i class="bi bi-journal-text"></i><span>Home screen</span><i class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="left-nav3" class="nav-content collapse" data-bs-parent="#left-nav3">
<li>
<a href="">
<span>Home screen - A </span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="sidebar position-static ms-5">
<ul class="sidebar-nav" id="sidebar-nav">
<li class="nav-item shadow ">
<a class="nav-link collapsed" href="">
<i class="bi bi-grid"></i>
<span>Home screen </span>
</a>
</li>
<li class="nav-item shadow ">
<a class="nav-link collapsed " href="">
<i class="bi bi-box-arrow-in-right"></i>
<span>Home screen</span>
</a>
</li>
<li class="nav-item shadow ">
<a class="nav-link collapsed " href="">
<i class="bi bi-file-font"></i>
<span>Home screen</span>
</a>
</li>
<li class="nav-item shadow ">
<a class="nav-link collapsed" data-bs-target="#left-nav4" data-bs-toggle="collapse" href="#" aria-expanded="false">
<i class="bi bi-layout-text-window-reverse"></i><span>Home screen</span><i class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="left-nav4" class="nav-content collapse" data-bs-parent="#left-nav4">
<li>
<a href="">
<span>Home screen - A</span>
</a>
</li>
<li>
<a href="">
<span>Home screen - B</span>
</a>
</li>
</ul>
</li>
<li class="nav-item shadow ">
<a class="nav-link collapsed" data-bs-target="#left-nav5" data-bs-toggle="collapse" href="#" aria-expanded="false">
<i class="bi bi-bar-chart"></i><span>Home screen</span><i class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="left-nav5" class="nav-content collapse" data-bs-parent="#left-nav5">
<li>
<a href="">
<span>Home screen - A </span>
</a>
</li>
<li>
<a href="">
<span>Home screen - B</span>
</a>
</li>
<li>
<a href="">
<span>Home screen - C</span>
</a>
</li>
</ul>
</li>
<li class="nav-item shadow ">
<a class="nav-link collapsed" data-bs-target="#left-nav6" data-bs-toggle="collapse" href="#" aria-expanded="false">
<i class="bi bi-journal-text"></i><span>Home screen</span><i class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="left-nav6" class="nav-content collapse" data-bs-parent="#left-nav6">
<li>
<a href="">
<span>Home screen - A </span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
Copy
.sidebar {
position: fixed;
top: 60px;
left: 0;
bottom: 0;
width: 300px;
z-index: 996;
transition: all 0.3s;
padding: 20px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #aab7cf transparent;
box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
background-color: #fff;
}
.sidebar-nav .nav-link.collapsed {
color: #363431;
background: #fff;
}
.sidebar-nav .nav-item {
margin-bottom: 5px;
}
.sidebar-nav li {
padding: 0;
margin: 0;
list-style: none;
}
element.style {
}
.sidebar-nav .nav-item {
margin-bottom: 5px;
}
.sidebar-nav li {
padding: 0;
margin: 0;
list-style: none;
}
.shadow {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
@media (max-width: 1199px) {
.sidebar {
left: -300px;
}
}
::-webkit-scrollbar {
width: 5px;
height: 4px;
background-color: #fff;
}
::-webkit-scrollbar-thumb {
background-color: #aab7cf;
border-radius: 25px;
}
@media (min-width: 1200px) {
#main,
#footer {
margin-left: 300px;
background-color: #F8F9F9;
}
}
@media (max-width: 1199px) {
.toggle-sidebar .sidebar {
left: 0;
}
}
@media (min-width: 1200px) {
.toggle-sidebar #main,
.toggle-sidebar #footer {
margin-left: 0;
}
.toggle-sidebar .sidebar {
left: -300px;
}
}
.sidebar-nav {
padding: 0;
margin: 0;
list-style: none;
}
.sidebar-nav li {
padding: 0;
margin: 0;
list-style: none;
}
.sidebar-nav .nav-item {
margin-bottom: 5px;
}
.sidebar-nav .nav-heading {
font-size: 11px;
text-transform: uppercase;
color: #899bbd;
font-weight: 600;
margin: 10px 0 5px 15px;
}
.sidebar-nav .nav-link {
display: flex;
align-items: center;
font-size: 15px;
font-weight: 600;
color: #167DF5;
transition: 0.3;
background: #f6f9ff;
padding: 10px 15px;
border-radius: 4px;
}
.sidebar-nav .nav-link i {
font-size: 16px;
margin-right: 10px;
color: #167DF5;
}
.sidebar-nav .nav-link.collapsed {
color: #363431;
background: #fff;
}
.sidebar-nav .nav-link.collapsed i {
color: #899bbd;
}
.sidebar-nav .nav-link:hover {
color: #167DF5;
background: #f6f9ff;
}
.sidebar-nav .nav-link:hover i {
color: #4154f1;
}
.sidebar-nav .nav-link .bi-chevron-down {
margin-right: 0;
transition: transform 0.2s ease-in-out;
}
.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
transform: rotate(180deg);
}
.sidebar-nav .nav-content {
padding: 5px 0 0 0;
margin: 0;
list-style: none;
}
.sidebar-nav .nav-content a {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 600;
color: #012970;
transition: 0.3;
padding: 10px 0 10px 40px;
transition: 0.3s;
}
.sidebar-nav .nav-content a i {
font-size: 6px;
margin-right: 8px;
line-height: 0;
border-radius: 50%;
}
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
color: #167DF5;
}
.sidebar-nav .nav-content a.active i {
background-color: #167DF5;
}
.sidebar-nav .nav-link.collapsed {
color: #363431;
background: #fff;
}
.sidebar-nav .nav-link:hover {
color: #167DF5;
background: #f6f9ff;
}