Bootstrap vertical sidebar menu
Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit.
Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.
Bootstrap has built-in .nav class to build any type of menu - vertical and horizontal. Just add flex-column next to the nav class like class="nav flex-column". navigation becomes vertical
You can add custom styles to nav-link or nav-item. Check given demo for more details
Here is the basic code for sidebar menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav class="sidebar"> | |
| <ul class="nav flex-column"> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#"> Link name </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#"> About page </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#"> Category name </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#"> Another page </a> | |
| </li> | |
| </ul> | |
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .sidebar .nav-link { | |
| font-weight: 500; | |
| color: var(--bs-dark); | |
| } | |
| .sidebar .nav-link:hover { | |
| background: var(--bs-light); | |
| color: var(--bs-primary); | |
| } |
Back to all examples