How to create Menus in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 16951 red flag
Rating: 5 out of 5  
 1 vote(s)

Bootstrap comes with CSS and JavaScript which contains a bunch of predefined Styles which can be used to beautify our website.
We can Create Stylish Menu's using Bootstrap.
Recommendation
Read How to create Tabs and Pills in Bootstrap Part-2 before this article.

Introduction

Please read Bootstrap Introduction if you would like to start.
Menu's are like a heart of the webpage which makes user easy to navigate particular sections. Bootstrap comes with Navs and Navbars to create menu's.
It is very simple to create menus using Navbars in Bootstrap.

Objective

The main objective of this article is to learn creating different types of Menus using Bootstrap.

Using Bootstrap code

Bootstrap contains so many navbar classes which are used to create different types of Menus. You can find them in bootstrap.css.

Creating normal menu using Navbars
Observe the below Example,
<nav role="navigation" class="navbar navbar-default">
        <!-- Grouping Brand with Toggle for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Brand</a>
        </div>
        <!-- Next nav links in the Navbar -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-certificate"></span> DotNetFunda</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-book"></span> ITFunda</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-gift"></span> KidsFunda</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-film"></span> FundooVideo</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
                <li><a href="#">SignUp</a></li>
            </ul>
        </div>
</nav>
In the above code, we have used navbar predefined classes such as navbar-default, navbar-header, navbar-collapse etc. of Bootstrap. 
Go to bootstrap.css and take a look at those styles.
In the above code we also grouped Glyphicons to the Menu elements to make them attractive.

Run the above code in your browser and you will see the following output,


If you reduce the screen size(Means mobile layout), the above code will gives following output,

Click the Toggle Navigation button to expand your Menu like below


Now change navbar-default to navbar-inverse and see the magic. 
<nav role="navigation" class="navbar navbar-inverse">
        <!-- Grouping Brand with Toggle for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Brand</a>
        </div>
        <!-- Next nav links in the Navbar -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-certificate"></span> DotNetFunda</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-book"></span> ITFunda</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-gift"></span> KidsFunda</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-film"></span> FundooVideo</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a></li>
                <li><a href="#">SignUp</a></li>
            </ul>
        </div>
</nav>
Above change of nav class will result as below,

Creating Full Menu with Search box and Dropdowns
Now lets create a complete menu with Dropdowns as well as Search box. Take a look at the below code,
<nav role="navigation" class="navbar navbar-inverse">
        <!-- Grouping Brand with Toggle for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Brand</a>
        </div>
        <!-- Next nav links in the Navbar -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-certificate"></span> DotNetFunda <b class="caret"></b></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Articles</a></li>
                        <li><a href="#">Interviews</a></li>
                        <li><a href="#">Forums</a></li>
                        <li class="divider"></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-book"></span> ITFunda <b class="caret"></b></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Training</a></li>
                        <li><a href="#">Placement</a></li>
                        <li class="divider"></li>
                        <li><a href="#">FAQ's</a></li>
                        <li><a href="#">Write Us</a></li>
                    </ul>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-gift"></span> KidsFunda</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-film"></span> FundooVideo</a></li>
            </ul>
            <form role="search" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" placeholder="Search" class="form-control">
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Contact</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Krishna <b class="caret"></b></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#"><span class="glyphicon glyphicon-phone"></span> Friends</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-off"></span> Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
</nav>
Dont get confused with above code, we are keeping more elements and hence it is little bigger. 

The output of the above code will gives us a beautiful menu bar as shown below,






Making Menus fixed to the Layout
In order to make the Menu bar fixed, we have to add navbar-fixed-top(to fix it to the top) or navbar-fixed-bottom(to fix to the bottom).
See the below code of Fixing Menu bar to the Top,
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
        <!-- Grouping Brand with Toggle for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Brand</a>
        </div>
        <!-- Next nav links in the Navbar -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-certificate"></span> DotNetFunda <b class="caret"></b></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Articles</a></li>
                        <li><a href="#">Interviews</a></li>
                        <li><a href="#">Forums</a></li>
                        <li class="divider"></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-book"></span> ITFunda <b class="caret"></b></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Training</a></li>
                        <li><a href="#">Placement</a></li>
                        <li class="divider"></li>
                        <li><a href="#">FAQ's</a></li>
                        <li><a href="#">Write Us</a></li>
                    </ul>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-gift"></span> KidsFunda</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-film"></span> FundooVideo</a></li>
            </ul>
            <form role="search" class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" placeholder="Search" class="form-control">
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Contact</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Krishna <b class="caret"></b><span class="glyphicon glyphicon-none"></span></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#"><span class="glyphicon glyphicon-phone"></span> Friends</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-off"></span> Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
</nav>
In the above code if you observe, we just added navbar-fixed-top to the nav element.

Lets Run this code in your browser to get the following output


Observe the output that your Menu is fixed to top. Similarly, add navbar-fixed-bottom instead of navbar-fixed-top in the above code and run it. You will see the menu fixed to bottom like below,


Similarly we have navbar-static-top which gives static menu.

Conclusion

We have seen the creation of different types of Menus using Bootstrap in this Chapter. Hope you understand it. If you get any doubts, please ask below.

Thanks for reading.

Recommendation
Read How to create Panels in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Posted by: Gurumatrix2004 on: 6/14/2014 | Points: 25
Great article..it really helped me to create menus using bootstrap library
Posted by: Goud.Kv on: 6/14/2014 | Points: 25
Thanks Gurunath..

Regards,
Krishna.

Login to post response

Comment using Facebook(Author doesn't get notification)