Vertical Navbar

Bootstrap 5 Vertical Navbar component

Responsive Vertical Navbar built with Bootstrap 5. The vertical navigation component provides an easy way to navigate through your website.

Basic example

In the basic version, the vertical navigation will appear over your website's content after clicking on a toggler.

Note: Use show and hide methods to toggle navigation with JavaScript.

Note: Adding the show class to a sidenav collapse element will expand this category on render.

Edit in sandbox 
        
            
            <nav id="sidenav-2" data-mdb-sidenav-init class="sidenav" data-mdb-position="absolute">
                <ul class="sidenav-menu">
                    <li>
                        <a class="sidenav-link"> <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a>
                    </li>
                    <li>
                        <a class="sidenav-link"> <i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span><i class="fas fa-angle-down rotate-icon"></i> </a>
                        <ul class="sidenav-collapse collapse">
                            <li>
                                <a class="sidenav-link">Link 2</a>
                            </li>
                            <li>
                                <a class="sidenav-link">Link 3</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="sidenav-link"> <i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span><i class="fas fa-angle-down rotate-icon"></i> </a>
                        <ul class="sidenav-collapse collapse">
                            <li>
                                <a class="sidenav-link">Link 4</a>
                            </li>
                            <li>
                                <a class="sidenav-link">Link 5</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>

            <!-- Sidenav-->
            <div style="padding: 20px;" class="text-center">
                <button data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidenav-2" class="btn btn-primary">
                    <i class="fas fa-bars"></i>
                </button>
            </div>

On the right

Place the navigation on the other side by setting the right attribute to true.

Edit in sandbox 
        
            
            <nav data-mdb-sidenav-init class="sidenav" data-mdb-right="true">
                ...
            </nav>

Not full height

This vertical navigation not taking up the full height of the website.

Edit in sandbox 
        
            
            <nav id="sidenav-3" data-mdb-position="absolute" class="sidenav bg-dark rounded-0 rounded-end w-auto h-auto" style="top: 20%;">
                <!-- Facebook -->
                <a class="btn btn-primary m-2 d-flex align-items-center justify-content-center" style="background-color: hsl(220, 44%, 41%); height: 50px; width: 50px;" href="#!">
                    <i class="fab fa-facebook-f fa-3x"></i>
                </a>

                <!-- Twitter -->
                <a class="btn btn-primary m-2 d-flex align-items-center justify-content-center" style="background-color: hsl(205, 81%, 63%); height: 50px; width: 50px;" href="#!">
                    <i class="fab fa-twitter fa-3x"></i>
                </a>

                <!-- Instagram -->
                <a class="btn btn-primary m-2 d-flex align-items-center justify-content-center" style="background-color: hsl(330, 70%, 50%); height: 50px; width: 50px;" href="#!">
                    <i class="fab fa-instagram fa-3x"></i>
                </a>

                <!--Whatsapp-->
                <a class="btn btn-primary m-2 d-flex align-items-center justify-content-center" style="background-color: hsl(125, 80%, 40%); height: 50px; width: 50px;" href="#!">
                    <i class="fab fa-whatsapp fa-3x"></i>
                </a>
            </nav>
            <div style="padding: 20px;" class="text-center">
                <button data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidenav-3" class="btn btn-primary">
                    <i class="fas fa-bars"></i>
                </button>
            </div>

Submenu

Submenu built with Bootstrap 5. Vertical navbar dropdowns menu, activated on click or hover.

Edit in sandbox 
        
            
            <!-- Sidenav -->
            <nav id="sidenav-4" data-mdb-sidenav-init class="sidenav" data-mdb-position="absolute" style="overflow: visible !important;">
                <ul class="sidenav-menu">
                    <li>
                        <a class="sidenav-link"> <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a>
                    </li>

                    <li>
                        <div class="dropend">
                            <a data-mdb-dropdown-init class="sidenav-link dropdown-toggle" data-mdb-toggle="dropdown"> <i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 1</span> </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li>
                                    <a class="dropdown-item" href="#">Another action</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        Submenu &raquo;
                                    </a>
                                    <ul class="dropdown-menu dropdown-submenu">
                                        <li>
                                            <a class="dropdown-item" href="#">Submenu item 1</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#">Submenu item 2</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#">Submenu item 3 &raquo; </a>
                                            <ul class="dropdown-menu dropdown-submenu">
                                                <li>
                                                    <a class="dropdown-item" href="#">Multi level 1</a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="#">Multi level 2</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#">Submenu item 4</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#">Submenu item 5</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><hr class="dropdown-divider" /></li>
                                <li><a class="dropdown-item" href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </li>

                    <li>
                        <div class="dropend">
                            <a data-mdb-dropdown-init class="sidenav-link dropdown-toggle" data-mdb-toggle="dropdown"> <i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span> </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                                <li><hr class="dropdown-divider" /></li>
                                <li><a class="dropdown-item" href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </nav>
            <!-- Sidenav -->

            <!-- Toggler -->
            <div style="padding: 20px;" class="text-center">
                <button data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidenav-4" class="btn btn-primary">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            <!-- Toggler -->
            
        
    
        
            
            .dropdown-menu li {
                position: relative;
            }
            .dropdown-menu .dropdown-submenu {
                display: none;
                position: absolute;
                left: 100%;
                top: -7px;
            }
            .dropdown-menu .dropdown-submenu-left {
                right: 100%;
                left: auto;
            }
            .dropdown-menu > li:hover > .dropdown-submenu {
                display: block;
            }