Bootstrap 4 Vertical Side Menu

Aug 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>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.