Bootstrap dropdown tabs

This article shows how to create bootstrap dropdown tabs navigation using bootstrap dropdown menu selection. This example will use css bootstrap component dropdown menu, bootstrap button groups and bootstrap javascript tab navigation component. This is very useful when you want to toggle the display based on dropdown selection. In a typical scenario you may want to toggle search criteria based on dropdown selection.

How to begin with Bootstrap

First download bootstrap from the official site. Extract and copy it into a folder. Your folders will contain three sub folders. They are as follows; CSS, JS, FONTS. If you are planning to use any images on the responsive website design layout you need to create another folder call IMG bootstrap default folder structure For this example you can use the basic bootstrap template provided on the download page. It is as follows;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

 Start building bootstrap Dropdown tabs

First rename the H1 tag text to bootstrap Dropdown Tabs. Before  use any css componenets in the center of your webpage you need to include following html code.

<div class="container">
</div>

Now copy the code example Nested button group css component from bootstrap website. Then remove the top two buttons from it. Then your code inside the container would look as follows;

<div class="container">
    <div class="btn-group">
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Dropdown <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>
</div>

On the browser page will look as follows;

bootstrap dropdown menu

Now copy bootstrap Javascript tab component from the bootstrap website and locate below button group. Your code will look as follows;

<div class="btn-group">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Dropdown <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="Div1">
        Tab A</div>
    <div class="tab-pane" id="Div2">
        Tab B</div>
    <div class="tab-pane" id="Div3">
        Tab C</div>
    <div class="tab-pane" id="Div4">
        Tab D</div>
</div>

 

Browse the page on the browser you will notice tab navigation at the bottom of drop down. Without any javascript coding both components work perfectly with basic references. Your page will look like as follows;

bootstrap tabs

Merging bootstrap dropdown and bootstrap tabs

Next step I will remove the top tabs and use dropdowns as tab selections. You can copy and replace the <li> tags from the tab menu, into dropdown menu <li> tags. Now if you browse your bootstrap Dropdown tabs page, you will notice two issues. That is every dropdown selection that you make will become active and tab container is not changing according to the dropdown selection. In order to fix these two problems we need a support of simple JQuery script. Bootstrap is 100% compatible with JQuery, as you can notice at the bottom of the basic bootstrap template it refer the JQuery library.

Scripting bootstrap Dropdown tabs

Now you can again look the bootstrap tab navigation, they have given a small Jquery script of default usage. Copy that script and place it at the bottom of your page where js references as follows;

<script type="text/javascript">
    $(function () {
        $('#myTab a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
    });
    </script>

Now you need to add a ID to bootstrap dropdown tabs  <UL> tag to make it wire-up JQuery script and the bootstrap dropdown tabs selection. After you add this script you can browse and check, tab navigation works only multiple selections remains as an issue. bootstrap dropdown tab Another issue with the bootstrap dropdown tabs code would be you can’t go back to a tab you have already visited. To fix these issues first you need to remove the dropdown default active css class and leave the tab container default active css class. Change the Jquery code a bit to handle the multiple selection issue as follows;

<script type="text/javascript">
    $(function () {
        $('#myTab a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
            //--clear the previous active selection status and remain the new selection only
            $('#myTab li').removeClass('active');
        })
    });
    </script>

You can notice the line below the comment. It will clear the old selection and activate the new selection at the same time it will keep the new selection and allow tab container to work accordingly. Completed view as follows; bootstrap dropdown tabsYou can download bootstrap dropdown tabs code.

Leave a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.