Sidebar is an additional navigation component that provides extensive support and a clear way for navigating through complex websites with hundreds of links and subpages.
Check out Bootstrap Sidebar Documentation for detailed instructions & even more examples.
<!--Main Navigation--><header><!-- Sidebar --><navid="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-white"><divclass="position-sticky"><divclass="list-group list-group-flush mx-3 mt-4"><ahref="#"
class="list-group-item list-group-item-action py-2 ripple"
aria-current="true"
><iclass="fas fa-tachometer-alt fa-fw me-3"></i><span>Main dashboard</span></a><ahref="#" class="list-group-item list-group-item-action py-2 ripple active"><iclass="fas fa-chart-area fa-fw me-3"></i><span>Webiste traffic</span></a><ahref="#" class="list-group-item list-group-item-action py-2 ripple"
><iclass="fas fa-lock fa-fw me-3"></i><span>Password</span></a><ahref="#" class="list-group-item list-group-item-action py-2 ripple"
><iclass="fas fa-chart-line fa-fw me-3"></i><span>Analytics</span></a><ahref="#" class="list-group-item list-group-item-action py-2 ripple"><iclass="fas fa-chart-pie fa-fw me-3"></i><span>SEO</span></a><ahref="#" class="list-group-item list-group-item-action py-2 ripple"
><iclass="fas fa-chart-bar fa-fw me-3"></i><span>Orders</span></a><ahref="#" class="list-group-item list-group-item-action py-2 ripple"
><iclass="fas fa-globe fa-fw me-3"></i><span>International</span></a><ahref="#" class="list-group-item list-group-item-action py-2 ripple"
><iclass="fas fa-building fa-fw me-3"></i><span>Partners</span></a><ahref="#" class="list-group-item list-group-item-action py-2 ripple"
><iclass="fas fa-calendar fa-fw me-3"></i><span>Calendar</span></a><ahref="#" class="list-group-item list-group-item-action py-2 ripple"
><iclass="fas fa-users fa-fw me-3"></i><span>Users</span></a><ahref="#" class="list-group-item list-group-item-action py-2 ripple"
><iclass="fas fa-money-bill fa-fw me-3"></i><span>Sales</span></a></div></div></nav><!-- Sidebar --><!-- Navbar --><navid="main-navbar" class="navbar navbar-expand-lg navbar-light bg-white fixed-top"><!-- Container wrapper --><divclass="container-fluid"><!-- Toggle button --><buttonclass="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#sidebarMenu"
aria-controls="sidebarMenu"
aria-expanded="false"
aria-label="Toggle navigation"
><iclass="fas fa-bars"></i></button><!-- Brand --><aclass="navbar-brand" href="#"><imgsrc="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp"
height="25"
alt="MDB Logo"
loading="lazy"
/></a><!-- Search form --><formclass="d-none d-md-flex input-group w-auto my-auto"><inputautocomplete="off"
type="search"
class="form-control rounded"
placeholder='Search (ctrl + "/" to focus)'
style="min-width: 225px;"
/><spanclass="input-group-text border-0"><iclass="fas fa-search"></i></span></form><!-- Right links --><ulclass="navbar-nav ms-auto d-flex flex-row"><!-- Notification dropdown --><liclass="nav-item dropdown"><aclass="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
><iclass="fas fa-bell"></i><spanclass="badge rounded-pill badge-notification bg-danger">1</span></a><ulclass="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink"
><li><aclass="dropdown-item" href="#">Some news</a></li><li><aclass="dropdown-item" href="#">Another news</a></li><li><aclass="dropdown-item" href="#">Something else here</a></li></ul></li><!-- Icon --><liclass="nav-item"><aclass="nav-link me-3 me-lg-0" href="#"><iclass="fas fa-fill-drip"></i></a></li><!-- Icon --><liclass="nav-item me-3 me-lg-0"><aclass="nav-link" href="#"><iclass="fab fa-github"></i></a></li><!-- Icon dropdown --><liclass="nav-item dropdown"><aclass="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
href="#"
id="navbarDropdown"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
><iclass="united kingdom flag m-0"></i></a><ulclass="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown"><li><aclass="dropdown-item" href="#"
><iclass="united kingdom flag"></i>English
<iclass="fa fa-check text-success ms-2"></i></a></li><li><hrclass="dropdown-divider" /></li><li><aclass="dropdown-item" href="#"><iclass="poland flag"></i>Polski</a></li><li><aclass="dropdown-item" href="#"><iclass="china flag"></i>中文</a></li><li><aclass="dropdown-item" href="#"><iclass="japan flag"></i>日本語</a></li><li><aclass="dropdown-item" href="#"><iclass="germany flag"></i>Deutsch</a></li><li><aclass="dropdown-item" href="#"><iclass="france flag"></i>Français</a></li><li><aclass="dropdown-item" href="#"><iclass="spain flag"></i>Español</a></li><li><aclass="dropdown-item" href="#"><iclass="russia flag"></i>Русский</a></li><li><aclass="dropdown-item" href="#"><iclass="portugal flag"></i>Português</a></li></ul></li><!-- Avatar --><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle hidden-arrow d-flex align-items-center"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
><imgsrc="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (31).webp"
class="rounded-circle"
height="22"
alt="Avatar"
loading="lazy"
/></a><ulclass="dropdown-menu dropdown-menu-end"
aria-labelledby="navbarDropdownMenuLink"
><li><aclass="dropdown-item" href="#">My profile</a></li><li><aclass="dropdown-item" href="#">Settings</a></li><li><aclass="dropdown-item" href="#">Logout</a></li></ul></li></ul></div><!-- Container wrapper --></nav><!-- Navbar --></header><!--Main Navigation--><!--Main layout--><mainstyle="margin-top: 58px;"><divclass="container pt-4"></div></main><!--Main layout-->body {
background-color:#fbfbfb;
}
@media (min-width:991.98px) {
main {
padding-left:240px;
}
}
/* Sidebar */
.sidebar {
position: fixed;
top:0;
bottom:0;
left:0;
padding:58px00; /* Height of navbar */box-shadow:02px5px0rgb(000/5%),02px10px0rgb(000/5%);
width:240px;
z-index:600;
}
@media (max-width:991.98px) {
.sidebar {
width:100%;
}
}
.sidebar .active {
border-radius:5px;
box-shadow:02px5px0rgb(000/16%),02px10px0rgb(000/12%);
}
.sidebar-sticky {
position: relative;
top:0;
height:calc(100vh-48px);
padding-top:0.5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}Download MDB 5 - free UI KIT
Choose your favourite customized component and click on the image
Copy & paste the code into your MDB project
- Bootstrap Address Form
- Bootstrap Avatar
- Bootstrap Back To Top Button
- Bootstrap Carousel Slider with Thumbnails
- Bootstrap Chat
- Bootstrap Code Blocks
- Bootstrap Comments
- Bootstrap Comparison Table
- Bootstrap Credit Card Form
- Bootstrap Drawer
- Bootstrap Nested Dropdown
- Bootstrap FAQ component / section
- Bootstrap Gallery
- Bootstrap Hamburger Menu
- Bootstrap Invoice
- Bootstrap Jumbotron
- Bootstrap Login Form
- Bootstrap Maps
- Bootstrap Media Object
- Bootstrap Mega Menu
- Bootstrap Multiselect
- Bootstrap News Feed
- Bootstrap Offcanvas
- Bootstrap Order Details
- Bootstrap Page Transitions
- Bootstrap Payment Forms
- Bootstrap Product Cards
- Bootstrap Profiles
- Bootstrap Quotes
- Bootstrap Registration Form
- Bootstrap Expanding Search Bar
- Bootstrap Shopping Carts
- Bootstrap Side Navbar
- Bootstrap Sidebar
- Bootstrap Social Media Icons & Buttons
- Bootstrap Square Buttons
- Bootstrap Survey Form
- Bootstrap Testimonial Slider
- Bootstrap Testimonials
- Bootstrap Textarea
- Bootstrap Timeline
- Bootstrap To Do List
- Bootstrap Video Carousel / Gallery
- Bootstrap Weather