Bootstrap Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more.
On this page:Here’s what you need to know before getting started with the sidebar:
.c-sidebar..c-sidebar{-sm|-md|-lg|-xl}-show or .c-sidebar-show to the .c-sidebar.<nav> element or, if using a more generic element such as a <div>, add a role="navigation" to .c-sidebar-nav to explicitly identify it as a landmark region for users of assistive technologies.Read on for an example and list of supported sub-components.
Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed:
.c-sidebar-header for optional header..c-sidebar-brand for your company, product, or project name..c-sidebar-nav for a full-height and lightweight navigation (including support for dropdowns)..c-sidebar-footer for optional footer..c-sidebar-minimizer for use with our minimizer plugin.<div class="c-sidebar c-sidebar-dark c-sidebar-show">
<ul class="c-sidebar-nav">
<li class="c-sidebar-nav-title">Nav Title</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" href="#">
<i class="c-sidebar-nav-icon cil-speedometer"></i> Nav item
</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" href="#">
<i class="c-sidebar-nav-icon cil-speedometer"></i> With badge
<span class="badge badge-primary">NEW</span>
</a>
</li>
<li class="c-sidebar-nav-item nav-dropdown">
<a class="c-sidebar-nav-link nav-dropdown-toggle" href="#">
<i class="c-sidebar-nav-icon cil-puzzle"></i> Nav dropdown
</a>
<ul class="c-sidebar-nav-dropdown-items">
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" href="#">
<i class="c-sidebar-nav-icon cil-puzzle"></i> Nav dropdown item
</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" href="#">
<i class="c-sidebar-nav-icon cil-puzzle"></i> Nav dropdown item
</a>
</li>
</ul>
</li>
<li class="c-sidebar-nav-item mt-auto">
<a class="c-sidebar-nav-link c-sidebar-nav-link-success" href="https://coreui.io">
<i class="c-sidebar-nav-icon cil-cloud-download"></i> Download CoreUI</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link c-sidebar-nav-link-danger" href="https://coreui.io/pro/">
<i class="c-sidebar-nav-icon cil-layers"></i> Try CoreUI
<strong>PRO</strong>
</a>
</li>
</ul>
<button class="c-sidebar-minimizer c-brand-minimizer" type="button"></button>
</div>Sidebar can utilize .c-sidebar{-sm|-md|-lg|-xl}-show classes to change whether is visible or hidden. You can easily choose when to show or hide sidebar.
For sidebar that is always visible, add the .c-sidebar-show class on the sidebar
Add data-toggle="sidebar{-sm|-md|-lg|-xl}-show" to .sidebar-toggler.
<header class="navbar navbar-light">
<button class="navbar-toggler sidebar-toggler" type="button" data-toggle="sidebar-show">
<span class="navbar-toggler-icon"></span>
</button>
</header> 
