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.