Bootstrap Navigation Bar With Toggle Button

Introduction

Navigation Bar is mainly used to provide direction to the users/visitors. To create a Bootstrap Navigation Bar with a Toggle button is very simple and easy.

Step 1

<ul>
<li>
<a href="http://www.yoursitename.com/Home">Home</a>
</li>
<li>
<a href="http://www.yoursitename.com/EleK">Electronics</a>
</li>
<li>
<a href="http://www.yoursitename.com/Books">Books</a>
</li>
<li>
<a href="http://www.yoursitename.com/BustiK">Bustickets</a>
</li>
</ul>

Output

Step 2

<ul class="nav navbar-nav">
<li>
<a href="http://www.yoursitename.com/Home">Home</a>
</li>
<li>
<a href="http://www.yoursitename.com/EleK">Electronics</a>
</li>
<li>
<a href="http://www.yoursitename.com/Books">Books</a>
</li>
<li>
<a href="http://www.yoursitename.com/BustiK">Bustickets</a>
</li>
</ul>

Output

Step 3

<div class="navbar-header">
<span class="navbar-brand">King's Kart</span>
</div>
<div >
<ul class="nav navbar-nav">
<li>
<a href="http://www.yoursitename.com/Home">Home</a>
</li>
<li>
<a href="http://www.yoursitename.com/EleK">Electronics</a>
</li>
<li>
<a href="http://www.yoursitename.com/Books">Books</a>
</li>
<li>
<a href="http://www.yoursitename.com/BustiK">Bustickets</a>
</li>
</ul>

Output

Step 4

<div class="navbar-header">
<span class="navbar-brand">King's Kart</span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="http://www.yoursitename.com/Home">Home</a>
</li>
<li>
<a href="http://www.yoursitename.com/EleK">Electronics</a>
</li>
<li>
<a href="http://www.yoursitename.com/Books">Books</a>
</li>
<li>
<a href="http://www.yoursitename.com/BustiK">Bustickets</a>
</li>
</ul>
</div>

Output

Step 5

<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<span class="navbar-brand">King's Kart</span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="http://www.yoursitename.com/Home">Home</a>
</li>
<li>
<a href="http://www.yoursitename.com/EleK">Electronics</a>
</li>
<li>
<a href="http://www.yoursitename.com/Books">Books</a>
</li>
<li>
<a href="http://www.yoursitename.com/BustiK">Bustickets</a>
</li>
</ul>
</div>

Output

Step 6

<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">King's Kart</span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="http://www.yoursitename.com/Home">Home</a>
</li>
<li>
<a href="http://www.yoursitename.com/EleK">Electronics</a>
</li>
<li>
<a href="http://www.yoursitename.com/Books">Books</a>
</li>
<li>
<a href="http://www.yoursitename.com/BustiK">Bustickets</a>
</li>
</ul>
</div>
</div>

Output

Step 7

<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myidname">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">King's Kart</span>
</div>
<div class="navbar-collapse collapse" id="myidname">
<ul class="nav navbar-nav">
<li>
<a href="http://www.yoursitename.com/Home">Home</a>
</li>
<li>
<a href="http://www.yoursitename.com/EleK">Electronics</a>
</li>
<li>
<a href="http://www.yoursitename.com/Books">Books</a>
</li>
<li>
<a href="http://www.yoursitename.com/BustiK">Bustickets</a>
</li>
</ul>
</div>

Output

I will combined all the preceding 7 steps into a single HTML file.

BootstrapNav.hmtl

<!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 Navigation with Toggle Button</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myidname">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">King's Kart</span>
</div>
<div class="navbar-collapse collapse" id="myidname">
<ul class="nav navbar-nav">
<li>
<a href="http://www.yoursitename.com/Home">Home</a>
</li>
<li>
<a href="http://www.yoursitename.com/EleK">Electronics</a>
</li>
<li>
<a href="http://www.yoursitename.com/Books">Books</a>
</li>
<li>
<a href="http://www.yoursitename.com/BustiK">Bustickets</a>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Output

Reference: http://getbootstrap.com/

4 Comments

Join the conversation! Your thoughts help the community grow.

Gopi Chand11y ago
Its great article, nicely explained, Welcome to c#corner community :)
- Kiranteja Jallepalli11y ago
  Thank you Gopi
Kiranteja Jallepalli11y ago
thank you santhakumar:)
Santhakumar Munuswamy11y ago
Thanks for nice article