core-logo

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.

On this page:



How it works

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

  • Sidebar requires a wrapping .c-sidebar.
  • Sidebar is hidden by default. Force it to be shown by adding .c-sidebar{-sm|-md|-lg|-xl}-show or .c-sidebar-show to the .c-sidebar.
  • Ensure accessibility by using a <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.

Supported content

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.

Example

<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>

Responsive behaviors

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>
CoreUI © 2020 creativeLabs. core-logo