Bootstrap Tabs With Drop Down

Bootstrap 2.3.2 enabled example

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<br/>
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1">Section 1</a>
    </li>
    <li class="dropdown"><a data-toggle="dropdown" class="dropDownTabsLink"><span class="dropdownTabName">Dropdown</span>
          <i class="icon-chevron-down"></i>
        </a>
      <ul class="dropdown-menu">
            <li><a href="#tab1">Action</a>
            </li>
            <li><a href="#tab2">Another action</a>
            </li>
        </ul>
    </li>
    <li class="dropdown"> <a data-toggle="dropdown" class="dropDownTabsLink"><span class="dropdownTabName">Dropdown2</span> <i class="icon-chevron-down"></i></a>

        <ul class="dropdown-menu">
            <li><a href="#tab3">Action2</a>
            </li>
            <li><a href="#tab4">Another action2</a>
            </li>
        </ul>
    </li>
</ul>

<div class="tab-content">
								
    <div class="tab-pane fade in active" id="tab1" style="padding-left:15px">
        Tab 1 Content...
    </div>
    
     <div class="tab-pane fade in" id="tab2" style="padding-left:15px">
        Tab 2 Content...
    </div>
    
    <div class="tab-pane fade in" id="tab3" style="padding-left:15px">
        Tab 3 Content...
    </div>
    
    <div class="tab-pane fade in" id="tab4" style="padding-left:15px">
        Tab 4 Content...
    </div>
</div>

CSS

@import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css');
 @import url("http:////netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css");
 .container {
    margin-top: 10px;
}

JavaScript

$(document).ready(function () {

    $('.nav-tabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
        if( $(this).is(".dropdown-menu li a")){
            $(this).html($(this).html());
            $(this).dropdown("toggle");
        }
    });
});