Bootstrap Vertical Dropdown Menu Example | Multilevel Menu

Hi! In this post we'll see how to create bootstrap vertical dropdown menu. Navigation Menu is one of the prominent features of modern websites and provides a means for easy navigation through websites. Besides a well-formed navigation menu will also greatly improves user experience. As we have already seen about creating bootstrap horizontal multilevel dropdown menu, this post will discuss about multilevel vertical dropdown menu in bootstrap.

Usually a Vertical Menu will be built by stacking up menu items or links one after another. Except for the appearance, vertical menu behaves similar to horizontal navigation menu. Plus you can also add multilevel dropdowns to this vertical menu. Here I'll show you how to create one such vertical dropdown menu with an example and change menu color in bootstrap.

Bootstrap Vertical Dropdown Menu Example

For building a vertical menu I'm going to use list-group component of bootstrap. By using this, you can quickly build multilevel sidebar menu. I'm going to place the menu in the left hand side of a two column layout, but you can also place it in the right side.

HTML Markup for Bootstrap Multilevel Vertical Menu

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <!-- column1, Vertical Dropdown Menu -->
            <div id="main-menu" class="list-group">
                <a href="#sub-menu" class="list-group-item active" data-toggle="collapse" data-parent="#main-menu">Item 1 <span class="caret"></span></a>
                <div class="collapse list-group-level1" id="sub-menu">
                    <a href="#" class="list-group-item" data-parent="#sub-menu">Sub Item 1</a>
                    <a href="#" class="list-group-item" data-parent="#sub-menu">Sub Item 2</a>
                    <a href="#sub-sub-menu" class="list-group-item" data-toggle="collapse" data-parent="#sub-menu">Sub Item 3 <span class="caret"></span></a>
                    <div class="collapse list-group-level2" id="sub-sub-menu">
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 1</a>
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 2</a>
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 3</a>
                    </div>
                </div>
                <a href="#" class="list-group-item">Item 2</a>
                <a href="#" class="list-group-item">Item 3</a>
                <a href="#" class="list-group-item">Item 4</a>
                <a href="#" class="list-group-item">Item 5</a>
            </div>    
        </div>
        <div class="col-md-9">
            <!-- column 2, content goes here... -->
        </div>
    </div>
</div>

By using the attribute data-toggle="collapse" you can easily collapse and expand a particular <div> block. This way the dropdown slides up and down to hide/show the next level menu items.

Though the above markup produce a basic level vertical drop down menu, this won't be appealing to everyone. To make it more suitable, we have to make some customizations to bootstrap css styles.

CSS Customization for Bootstrap Vertical Menu

#main-menu {
    background-color: #2E3039;
}

.list-group-item {
    background-color: #2E3039;
    border: none;
}

a.list-group-item {
    color: #FFF;
}

a.list-group-item:hover,
a.list-group-item:focus {
    background-color: #43D5B1;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    color: #FFF;
    background-color: #43D5B1;
    border: none;
}

.list-group-item:first-child,
.list-group-item:last-child {
    border-radius: 0;
}

.list-group-level1 .list-group-item {
    padding-left:30px;
}

.list-group-level2 .list-group-item {
    padding-left:60px;
}

With all the above css changes now you will get a cool vertical dropdown menu in bootstrap like this.

Bootstrap Vertical Dropdown Menu

Now click on the dropdown button and the menu will slide open to show the second level menu items.

Bootstrap Multilevel Vertical Dropdown Menu

You can add even more depths to the menu in similar fashion. That was all about creating bootstrap vertical dropdown menu. I hope you find this bootstrap multilevel vertical menu example useful. Meet you in the next tutorial.