CoreUI Logo
Sneak Peek! CoreUI 3 is coming! Please try the latest version - CoreUI PRO 3.0.0-alpha.. Try CoreUI PRO 3.0.0-alpha

CoreUI Aside menu

Documentation and examples for CoreUI’s powerful, aside menu component.

How it works

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

  • Aside menu requires a wrapping .aside-menu.
  • Aside menu is hidden by default. Force it to be shown by adding .aside-menu{-sm|-md|-lg|-xl}-show or .aside-menu-show to the .app.

Examples

Main Content
<div class="app aside-menu-show" style="background-color:#e4e5e6">
  <div class="app-body">
    <main class="main">Main Content</main>
    <aside class="aside-menu">
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab">
            Tab 1
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#tab2" role="tab">
            Tab 2
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#tab3" role="tab">
            Tab 3
          </a>
        </li>
      </ul>
      <!-- Tab panes-->
      <div class="tab-content">
        <div class="tab-pane p-3 active" id="tab1" role="tabpanel">
          Tab 1 Content
        </div>
        <div class="tab-pane p-3" id="tab2" role="tabpanel">
          Tab 2 Content
        </div>
        <div class="tab-pane p-3" id="tab3" role="tabpanel">
          Tab 3 Content
        </div>
      </div>
    </aside>
  </div>
</div>

Responsive behaviors

Aside menu can utilize .aside-menu{-sm|-md|-lg|-xl}-show classes to change whether is visible or hidden. You can easily choose when to show or hide sidebar.

For aside menu that is always visible, add the .aside-menu-show class on the sidebar

Aside menu toggler

Add data-toggle="aside-menu{-sm|-md|-lg|-xl}-show" to .aside-menu-toggler.

<header class="navbar navbar-light">
  <button class="navbar-toggler aside-menu-toggler" type="button" data-toggle="aside-menu-show">
    <span class="navbar-toggler-icon"></span>
  </button>
</header>