Jquery

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,

Related Post

Simple Example To Create Multilevel Drop Down Menu in Bootstrap

<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

View Comments

  • 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

Recent Posts

Configure and Retrieve S3 Information Using Laravel PHP-AWS-SDK

This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More

2 months ago

What is the Purpose of php_eol in PHP?

in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More

8 months ago

Laravel Table Relationship Methods With Example

This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More

8 months ago

Exploring the Power of Laravel Eloquent Join?

We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More

9 months ago

Quick and Easy Installation of Laravel Valet

in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More

9 months ago

What is Laravel Soft Delete and How Does it Work?

I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More

9 months ago

Categories