How To Create Multilevel Drop Down Menu in Bootstrap

In this tutorial we will learn how to create multilevel drop down menu, normally bootstrap provided single level drop down menu list but 3.X bootstrap provided some classes to create well designed multilevel drop down menu.

Bootstrap is very popular open source CSS framework.You can create awesome ui using in-built bootstrap css class.This css tutorial help to create multilevel menu using bootstrap 3.0.

You can also check other tutorial of Bootstrap,

mutilevel-dropdown-bootstrap

Simple Example To Create Multilevel Drop Down Menu in Bootstrap

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <div class="nav-collapse">
        <ul class="nav">
                <a class="brand" href="#">PHP Flow</a>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">JQuery</a></li>
                <li class="dropdown" id="accountmenu">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Web Technology<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">PHP</a></li>
                        <li class="dropdown-submenu">
                          <a tabindex="-1" href="#">Framework</a>
                          <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="#">Zend</a></li>
                            <li class="dropdown-submenu">
                              <a href="#">CMS</a>
                              <ul class="dropdown-menu">
                                  <li><a href="#">WordPress</a></li>
                                  <li><a href="#">joomla</a></li>
                              </ul>
                            </li>
                            <li><a href="#">Cake</a></li>
                            <li><a href="#">Symphony</a></li>
                          </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        <ul class="nav pull-right">

        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Demo & Download Code Of Multilevel Drop Down Menu in Bootstrap

  • Thank you very much!

  • Hi,
    You need create your own custom css, for left arrow
    .dropdown-submenu>a.left-arrow:after {
    float: left;
    border-left: none;
    margin-left: -10px;
    margin-right: 0;
    border-right: 4px dashed;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    }
    and
    add ‘left-arrow’ on anchor tag where do u want show left arrow menu like below
    Framework