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

{% block page %}
<h1>{{ title }}</h1>
<p>Extend <a href="index.html">sidebar menus</a> with basic submenus.</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-submenu.html" target="_blank" class="nav-link">Demo</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="usage">
      <h3>Basic usage</h3>
      <blockquote>
        To create a basic sidebar submenu:
      </blockquote>
      <ul>
        <li>add <code>ul</code> wrapper using the <code>.sidebar-submenu</code> class, after a <code>.sidebar-menu-button</code> element</li>
        <li>add <code>li</code> submenu items using the <code>.sidebar-menu-item</code> class</li>
        <li>add <code>a</code> submenu buttons using the <code>.sidebar-menu-button</code> class</li>
        <li>add the <code>.open</code> class to the parent <code>.sidebar-menu-item</code> element to display a submenu</li>
      </ul>

      {% include 'code/sidebar-menu/submenu.html' %}

      <h3>Behaviour</h3>
      See <a href="collapse.html">sidebar collapse</a> and <a href="dropdown.html">sidebar dropdown</a>.
    </div>
    <div class="tab-pane" id="css">
      <blockquote>
        Also see the CSS reference for <a href="index.html#css">sidebar menus</a>.
      </blockquote>
      <div class="table-responsive">
        <table class="table table-sm">
          <thead>
            <tr>
              <th width="230">CSS Class</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code>.sidebar-submenu</code></td>
              <td>The sidebar submenu wrapper <code>ul</code> placed after <code>a.sidebar-menu-button</code> elements</td>
            </tr>
            <tr>
              <td><code>.sidebar-menu-item</code></td>
              <td>The sidebar submenu item <code>li</code></td>
            </tr>
            <tr>
              <td><code>.sidebar-menu-button</code></td>
              <td>The sidebar submenu button <code>a</code></td>
            </tr>
            <tr>
              <td><code>.open</code></td>
              <td>Makes the sidebar submenu visible when applied to a <code>li.sidebar-menu-item</code> parent</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="tab-pane" id="sass">
      <blockquote>
        You can customize sidebar submenus with the following Sass variables.
      </blockquote>

      <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>$ssm-button-height</code></td>
              <td>Defines the height in <code>px</code> for sidebar submenu buttons</td>
              <td class="text-xs-center"><code>$sm-button-height</code></td>
            </tr>
            <tr>
              <td><code>$ssm-button-font-size</code></td>
              <td>Defines the base font size in <code>px</code> for sidebar submenu buttons</td>
              <td class="text-xs-center"><code>$sm-button-font-size</code></td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <h3>.sidebar-menu-icon</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>$ssm-icon-font-size</code></td>
              <td>Defines the base font size in <code>px</code> for sidebar submenu icons</td>
              <td class="text-xs-center"><code>$sm-icon-font-size</code></td>
            </tr>
          </tbody>
        </table>
      </div>

      <blockquote>
        <h3>See also</h3>
        <ul>
          <li>Sass reference for <a href="index.html#sass">sidebar menus</a>.</li>
          <li>Sass reference for sidebar submenus with <a href="utilities.html#sass">sidebar menu utilities</a>.</li>
        </ul>
      </blockquote>
    </div>
  </div>
</div>

{% endblock %}