CoreUI Logo
🎉 Limited offer! Get a Pro license and save up to $1.000. 🎉 Learn more

Bootstrap sidebar

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.

How it works

Here’s what you need to know before getting started with the sidebar:

  • Sidebar requires a wrapping .sidebar.
  • Sidebar is hidden by default. Force it to be shown by adding .sidebar{-sm|-md|-lg|-xl}-show or .sidebar-show to the .app.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to .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.

Supported content

Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed:

  • .sidebar-header for optional header.
  • .sidebar-brand for your company, product, or project name.
  • .sidebar-nav for a full-height and lightweight navigation (including support for dropdowns).
  • .sidebar-footer for optional footer.
  • .sidebar-minimizer for use with our minimizer plugin.

Example

<div class="sidebar">
  <nav class="sidebar-nav">
    <ul class="nav">
      <li class="nav-title">Nav Title</li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="nav-icon cui-speedometer"></i> Nav item
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="nav-icon cui-speedometer"></i> With badge
          <span class="badge badge-primary">NEW</span>
        </a>
      </li>
      <li class="nav-item nav-dropdown">
        <a class="nav-link nav-dropdown-toggle" href="#">
          <i class="nav-icon cui-puzzle"></i> Nav dropdown
        </a>
        <ul class="nav-dropdown-items">
          <li class="nav-item">
            <a class="nav-link" href="#">
              <i class="nav-icon cui-puzzle"></i> Nav dropdown item
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <i class="nav-icon cui-puzzle"></i> Nav dropdown item
            </a>
          </li>
        </ul>
      </li>
      <li class="nav-item mt-auto">
        <a class="nav-link nav-link-success" href="https://coreui.io">
          <i class="nav-icon cui-cloud-download"></i> Download CoreUI</a>
      </li>
      <li class="nav-item">
        <a class="nav-link nav-link-danger" href="https://coreui.io/pro/">
          <i class="nav-icon cui-layers"></i> Try CoreUI
          <strong>PRO</strong>
        </a>
      </li>
    </ul>
  </nav>
  <button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>

Responsive behaviors

Sidebar can utilize .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 .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>