CoreUI Logo

CoreUI sidebar

Documentation and examples for CoreUI’s powerful, responsive navigation sidebar. Includes 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>