bootstrap-layout/docs/src/html/pages/sidebar-menu/index.html

Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities

---
title: Sidebar menu
slug: sidebar-menu/index
path: ../
---
{% extends "layouts/default.html" %}

{% block page %}
<h1>{{ title }}</h1>
<p>Create sidebar menus.</p>

<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#usage" data-toggle="pill" class="nav-link active">Usage</a>
    </li>
    <li class="nav-item">
      <a href="#css" data-toggle="pill" class="nav-link">CSS</a>
    </li>
    <li class="nav-item">
      <a href="#sass" data-toggle="pill" class="nav-link">Sass</a>
    </li>
    <li class="nav-item">
      <a href="../demo/sidebar-menu-basic.html" target="_blank" class="nav-link">Demo</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="usage">
      <blockquote>
        To create a basic sidebar menu:
      </blockquote>
      <ul>
        <li>add <code>ul</code> wrapper using the <code>.sidebar-menu</code> class</li>
        <li>add <code>li</code> menu items using the <code>.sidebar-menu-item</code> class</li>
        <li>add <code>a</code> menu buttons use the <code>.sidebar-menu-button</code> class</li>
        <li>add the <code>.active</code> class to <code>.sidebar-menu-item</code> elements</li>
      </ul>

      {% include 'code/sidebar-menu/basic.html' %}
    </div>
    <div class="tab-pane" id="css">
      <div class="table-responsive">
        <table class="table table-sm">
          <thead>
            <tr>
              <th>CSS Class</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code>.sidebar-menu</code></td>
              <td>The sidebar menu wrapper <code>ul</code></td>
            </tr>
            <tr>
              <td><code>.sidebar-menu-item</code></td>
              <td>The sidebar menu item <code>li</code></td>
            </tr>
            <tr>
              <td><code>.sidebar-menu-button</code></td>
              <td>The sidebar menu button <code>a</code></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="tab-pane" id="sass">
      <blockquote>
        You can customize sidebar menus with the following Sass variables.
      </blockquote>

      <h3>Spacing</h3>
      <div class="table-responsive">
        <table class="table table-sm">
          <thead>
            <tr>
              <th width="250">Sass variable</th>
              <th>Description</th>
              <th class="text-xs-center" width="200">Default value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code>$sm-spacing-x</code></td>
              <td>Defines the horizontal spacing for sidebar menus</td>
              <td class="text-xs-center"><code>$sidebar-spacing-x</code></td>
            </tr>
            <tr>
              <td><code>$sm-spacing-y</code></td>
              <td>Defines the vertical spacing for sidebar menus</td>
              <td class="text-xs-center"><code>$sidebar-spacing-y</code></td>
            </tr>
          </tbody>
        </table>
      </div>

      <h3>.sidebar-menu-button</h3>
      <div class="table-responsive">
        <table class="table table-sm">
          <thead>
            <tr>
              <th width="250">Sass variable</th>
              <th>Description</th>
              <th class="text-xs-center" width="200">Default value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code>$sm-button-font-size</code></td>
              <td>Defines the base font size in <code>px</code> for <code>.sidebar-menu-button</code></td>
              <td class="text-xs-center"><code>$sidebar-font-size</code></td>
            </tr>
            <tr>
              <td><code>$sm-button-font-weight</code></td>
              <td>Defines the font weight for <code>.sidebar-menu-button</code></td>
              <td class="text-xs-center"><code>400</code></td>
            </tr>
            <tr>
              <td><code>$sm-button-height</code></td>
              <td>Defines the height in <code>px</code> for <code>.sidebar-menu-button</code></td>
              <td class="text-xs-center"><code>42px</code></td>
            </tr>
            <tr>
              <td><code>$sm-active-button-font-weight</code></td>
              <td>Defines the font weight for <code>.sidebar-menu-button</code> when using <code>li.sidebar-menu-item.active</code></td>
              <td class="text-xs-center"><code>$sm-button-font-weight</code></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{% endblock %}