Menu in navbar in Bootstrap

How to create menu using navbar in Bootstrap

Menu in navbar

Menu's are important in the webpages which makes user easy to navigate particular sections, boootstrap creates menus using nav and navbar

Normal menu

<h2>Normal menu</h2>
    <nav class="navbar navbar-default">
        <div class="navbar-header">
            <button type="button" data-target="#mynavbar" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">ToggleNavigation</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>
        <div id="mynavbar" 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>TechFunda</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="#">Sign UP</a></li>
        </ul>
        </div>
    </nav>

In the above code snippet we have defined the nav element with class attribute value navbar-default
In the next line we have class attribute value navbar-header in div and we have button with data-target with #mynavbar, data-toggle as collapse with class attribute valuenavbar-toggle and we have anchor tag using class attribute value navbar-brand with value brand
In the next line we are having div with id as mynavbar with class attribute collapse navbar-collapse and we defined class attribute value nav navbar-nav in the ul elements with list values as Home, TechFunda, ITFunda, KidsFunda, Fundoovideo
In the next line we are having class attribute value as nav navbar-nav navbar-right in the ul elements which aligns the given values in the right side of the navbar

output

In large screen

If Mobile screen

We can find the toggle navigation to open the list values in the navbar

Menu using navbar-inverse

We can create above example program using navbar -inverse, it creates the navbar in black color, we need just to add the navbar-inverse instead of the navbar-default in the nav tag

 <h2>Menu using Navbar-inverse</h2>
    <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <button type="button" data-target="#mynavbar" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">ToggleNavigation</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>
        <div id="mynavbar" 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>TechFunda</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="#">Sign UP</a></li>
        </ul>
        </div>
    </nav>

Menu using navbar-inverse

In the above code snippet we have defined the nav element using class attribute navbar-inverse to create black color
In the next line we created button using value of class attribute navbar-header in div and we have button with data-target with #mynavbar, data-toggle=collapse and value of class attribute value =navbar-toggle and we have anchor tag with class attribute navbar-brand with value brand
In the next line we are having div with id as mynavbar with value of class attribute=collapse navbar-collapse class with nav navbar-nav in ul elements and the list values as Home, TechFunda, ITFunda, KidsFunda, Fundoovideo
In the next line we are having the ul elements values to align the values in the right side by using class attribute value of nav navbar-nav navbar-right which aligns the given values in the right side of the navbar

output

In large screens

In mobile screens

We find a toggle navigation to click the button to open the list values

Creating navbar menu with search box and dropdown

 <h2>Menu using Navbar-inverse</h2>
    <nav class="navbar navbar-inverse">
        <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>
        
        <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="#">Online training</a></li>
                    <li><a href="#">Offline Traning</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Contact us</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> Manideep <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>

Menu with search and dropdown

In the above code snippet we have created search box and dropdown button in the menu
We have class attribute value as navbar-inverse in the nav element and in the nav element we have taken another div with value of class attribute navbar-header, we created button with data-target=#navbarcollapse anad data-toggle as collapse and class as navbar-toggle, we are having span element with class attribute as sr-only with value Togglenavigation, we have three span elements with class attribute value icon-bar in the button after creating button, we are having <a> tag using class attribute value navbar-brand with value brand
In the next line we are having the div with id navbarcollapse using value of class attribute navbar-collapse and defining the ul element to define the list values using class attribute value navbar-nav, we created dropdown to the list values DotNetFunda and ITFunda by using value of class attribute dropdown-toggle
In the next line we are having form element using class navbar-form, we have div with class form-group to create input type=text with class form-control
In the next line we created ul elements to align the li values in the right side of the navbar using class attribute navbar-right and created dropdown for the value manideep