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>