Bootstrap Tutorial - Nest controls inside dropdown menu








The following code shows how to nest controls inside dropdown menu.

Example

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-git2.js'></script>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type='text/javascript'
  src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<style type='text/css'>
.myMenu .nav, .myMenu .collapse, .myMenu .dropup, .myMenu .dropdown {
  position: static;
}<!--from  w  w  w  .ja va 2 s  .  com-->

.myMenu .container {
  position: relative;
}

.myMenu .dropdown-menu {
  left: auto;
}

.myMenu .nav.navbar-right .dropdown-menu {
  left: auto;
  right: 0;
}

.myMenu .myMenu-content {
  padding: 20px 30px;
}

.myMenu .dropdown.myMenu-fw .dropdown-menu {
  left: 0;
  right: 0;
}
</style>

</head>
<body>
  <div class="navbar myMenu navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" data-toggle="collapse"
          data-target="#navbar-collapse-1" class="navbar-toggle">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">My Menu</a>
      </div>
      <div id="navbar-collapse-1" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <!-- Classic list -->
          <li class="dropdown"><a href="#" data-toggle="dropdown"
            class="dropdown-toggle">List<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <!-- Content container to add padding -->
                <div class="myMenu-content">
                  <div class="row">
                    <ul class="col-sm-2 list-unstyled">
                      <li>
                        <p>
                          <strong>Section Title</strong>
                        </p>
                      </li>
                      <li>List Item</li>
                      <li>List Item</li>
                      <li>List Item</li>
                      <li>List Item</li>
                      <li>List Item</li>
                      <li>List Item</li>
                    </ul>
                    <ul class="col-sm-2 list-unstyled">
                      <li>
                        <p>
                          <strong>Links Title</strong>
                        </p>
                      </li>
                      <li><a href="#"> Link Item </a></li>
                      <li><a href="#"> Link Item </a></li>
                      <li><a href="#"> Link Item </a></li>
                      <li><a href="#"> Link Item </a></li>
                      <li><a href="#"> Link Item </a></li>
                      <li><a href="#"> Link Item </a></li>
                    </ul>
                    <ul class="col-sm-2 list-unstyled">
                      <li>
                        <p>
                          <strong>Section Title</strong>
                        </p>
                      </li>
                      <li>List Item</li>
                      <li>List Item</li>
                      <li>List Item</li>
                      <li>List Item</li>
                      <li>List Item</li>
                      <li>List Item</li>
                    </ul>
                    <ul class="col-sm-2 list-unstyled">
                      <li>
                        <p>
                          <strong>Section Title</strong>
                        </p>
                      </li>
                      <li>List Item</li>
                      <li>List Item</li>
                      <li>
                        <ul>
                          <li><a href="#"> Link Item </a></li>
                          <li><a href="#"> Link Item </a></li>
                          <li><a href="#"> Link Item </a></li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul></li>
          <!-- Accordion demo -->
          <li class="dropdown"><a href="#" data-toggle="dropdown"
            class="dropdown-toggle">Accordion<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <div class="myMenu-content">
                  <div class="row">
                    <div id="accordion" class="panel-group">
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion"
                              href="#collapseOne">Collapsible Group Item #1</a>
                          </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                          <div class="panel-body">Ut consectetur ullamcorper
                            purus a rutrum. Etiam dui nisi, hendrerit feugiat
                            scelerisque et, cursus eu magna.</div>
                        </div>
                      </div>
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion"
                              href="#collapseTwo">Collapsible Group Item #2</a>
                          </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse">
                          <div class="panel-body">Nullam pretium fermentum
                            sapien ut convallis. Suspendisse vehicula, magna non
                            tristique tincidunt, massa nisi luctus tellus, vel laoreet
                            sem lectus ut nibh.</div>
                        </div>
                      </div>
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion"
                              href="#collapseThree">Collapsible Group Item #3</a>
                          </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse">
                          <div class="panel-body">Praesent leo quam, faucibus
                            at facilisis id, rhoncus sit amet metus. Sed vitae ipsum
                            non nibh mattis congue eget id augue.</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul></li>
          <!-- Classic dropdown -->
          <li class="dropdown"><a href="#" data-toggle="dropdown"
            class="dropdown-toggle">Classic<b class="caret"></b></a>
            <ul role="menu" class="dropdown-menu">
              <li><a tabindex="-1" href="#"> Action </a></li>
              <li><a tabindex="-1" href="#"> Another action </a></li>
              <li><a tabindex="-1" href="#"> Something else here </a></li>
              <li class="divider"></li>
              <li><a tabindex="-1" href="#"> Separated link </a></li>
            </ul></li>
          <!-- Pictures -->
          <li class="dropdown myMenu-fw"><a href="#"
            data-toggle="dropdown" class="dropdown-toggle">Pictures<b
              class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <div class="myMenu-content">
                  <div class="row">
                    <div class="col-xs-6 col-sm-2">
                      <a href="#" class="thumbnail"><img alt="150x190"
                        src="http://placehold.it/150x190"></a>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                      <a href="#" class="thumbnail"><img alt="150x190"
                        src="http://placehold.it/150x190"></a>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                      <a href="#" class="thumbnail"><img alt="150x190"
                        src="http://placehold.it/150x190"></a>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                      <a href="#" class="thumbnail"><img alt="150x190"
                        src="http://placehold.it/150x190"></a>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                      <a href="#" class="thumbnail"><img alt="150x190"
                        src="http://placehold.it/150x190"></a>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                      <a href="#" class="thumbnail"><img alt="150x190"
                        src="http://placehold.it/150x190"></a>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

Click to view the demo