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>