Bootstrap 4 Vertical Side Menu

August 22, 2017
Nested and accordion sub menus.

Basic vertical menu

Use Navs - Vertical.

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Item 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 3</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Item 4</a>
  </li>
</ul>  

Highlight active item

Use nav-pills.

<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Item 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 3</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Item 4</a>
  </li>
</ul>  

Nested vertical menu

Use spacing for left margin.

<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a class="nav-link" href="#">Item 1</a>
    <ul class="nav flex-column ml-3">
      <li class="nav-item">
        <a class="nav-link active" href="#">Sub 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sub 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sub 3</a>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 3</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Item 4</a>
  </li>
</ul>

Accordian (expandable and collapsible) nested menu

Use Collapse.

<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a class="nav-link" data-toggle="collapse" href="#item-1">Item 1</a>
    <div id="item-1" class="collapse">
      <ul class="nav flex-column ml-3">
        <li class="nav-item">
          <a class="nav-link active" href="#">Sub 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 3</a>
        </li>
      </ul>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 3</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Item 4</a>
  </li>
</ul>

Only 1 sub menus are shown/expanded at any time

Use data-parent attribute for Collapse.

<ul id="accordion1" class="nav nav-pills flex-column">
  <li class="nav-item">
    <a class="nav-link" data-toggle="collapse" href="#item-1" data-parent="#accordion1">Item 1</a>
    <div id="item-1" class="collapse show">
      <ul class="nav flex-column ml-3">
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 1-1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 1-2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 1-3</a>
        </li>
      </ul>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="collapse" href="#item-2" data-parent="#accordion1">Item 2</a>
    <div id="item-2" class="collapse">
      <ul class="nav flex-column ml-3">
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 2-1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 2-2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 2-3</a>
        </li>
      </ul>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="collapse" href="#item-3" data-parent="#accordion1">Item 3</a>
    <div id="item-3" class="collapse">
      <ul class="nav flex-column ml-3">
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 3-1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 3-2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 3-3</a>
        </li>
      </ul>
    </div>
  </li>
</ul>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.