Navigation Bar एक Navigation Header की तरह है जो Page के Top पर रखा गया है. आप इसको Screen Size के अनुसार Collapse और Extend कर सकते हो. Bootstrap मे Page के Top पर एक Standard Navigation Bar बनाने के लिए <nav class = "navbar navbar-default"> Class का उपयोग किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Navigation bar Example</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Tutorialsroot.com</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
PHP
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li class="divider"></li>
<li><a href="#">CSS3</a></li>
<li class="divider"></li>
<li><a href="#">Bootstrap</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navbar Example</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class = "navbar-toggle"
data-toggle="collapse" data-target = "#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Tutorialsroot</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">HTML5</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
CSS
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">CSS3</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">PHP</a></li>
<li class="divider"></li>
<li><a href="#">JAVA</a></li>
<li class="divider"></li>
<li><a href="#">SQL</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>