Quick Reach
- 1 The navbar in Bootstrap
- 2 Quick examples of navbar
- 3 A basic example of creating menu with bootstrap navbar
- 4 navbar example with form component
- 5 Adding dropdown to navbar example
- 6 Using button in the navbar example
- 7 Top-fixed navbar example
- 8 Fixed Bottom navbar example
- 9 navbar different color example
The navbar in Bootstrap
Bootstrap provides an easy way to create menu bar for web applications by using the .navbar class. Not only you can create simple static menu that contains basic menu items like Home, products, services, about, contact, help etc but also you can include search facility, forms, dropdown in navigation bars quite easily. Twitter Bootstrap navbar is the meta component that is responsive. Navbar starts as collapsed in the mobile devices.
This tutorial will show you how to use navbar with examples for simple and added components that you can see online or try at your local machine as well.
Quick examples of navbar
A basic example of creating menu with bootstrap navbar
The following example creates a simple navigation on the top of “Bootstrap theme” with general menu items like Home, products, special offer, services etc. The main navbar is contained in the <nav> tag. While an unordered list, <ul> is created inside the <div> with Bootstrap collapse class that contains menu items.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html>
<head>
<title>navbar example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<h1>navbar Example</h1>
<nav role="navigation">
<div class="container-fluid">
<!-- Navigation bar -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Special Offers</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
|
navbar example with form component
Following example adds a form inside the navbar that adds search site facility in the navigation bar. The form is added just after </ul> closing tag.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<!DOCTYPE html>
<html>
<head>
<title>navbar example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<h1>navbar Example</h1>
<nav role="navigation">
<div class="container-fluid">
<!-- Navigation bar -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Special Offers</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" placeholder="Search site">
</div>
<button type="submit">Go</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
|
Note that, you can add Bootstrap icons at the form button as well. An example in navbar is shown in the Bootstrap icon chapter.
Adding dropdown to navbar example
Following example adds a dropdown inside the navbar. A dropdown is nothing except a list <ul> that uses twitter bootstrap dropdown class. See how simple it is to create a dropdown inside the navbar.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
<!DOCTYPE html>
<html>
<head>
<title>navbar example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<h1>navbar Example</h1>
<nav role="navigation">
<div class="container-fluid">
<!-- Navigation bar -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li class="active"><a href="#" >Home</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Products <b></b></a>
<ul class="dropdown-menu">
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li class="divider"></li>
<li><a href="#">Product 4</a></li>
<li class="divider"></li>
<li><a href="#">Product 5</a></li>
</ul>
</li>
<li><a href="#">Special Offers</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" placeholder="Search site">
</div>
<button type="submit">Go</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
|
You can see, a dropdown of products, just ahead of Home menu item, is created with a separator as well. You can learn more about Bootstrap dropdown in its chapter.
Using button in the navbar example
You can add buttons in the navigation bar by using the .navbar-btn class in the button tag. See the example below to add Sign-in button in the navigation bar.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html>
<head>
<title>navbar example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<h1>navbar Example</h1>
<nav role="navigation">
<div class="container-fluid">
<!-- Navigation bar -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button type="button">Sign in</button>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
|
You can learn more about Bootstrap button styles that you can easily include anywhere in the web documents, in its chapter.
Top-fixed navbar example
By adding navbar-fixed-top class to <nav> tag, you can create a fixed menu bar on top of the web page. As you scroll, the navbar remains fixed. By default, the content below the navigation will overlap top fixed menu. To avoid that you can use padding-top as a separate style. See the following example. To experience fixed top menu, shorten the window to the extent where you can see the navigation bar.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<title>navbar example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style>
body { padding-top: 70px; }
</style>
</head>
<body>
<div>
<h1>navbar Example</h1>
<nav role="navigation">
<div class="container">
<!-- Navigation bar -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button type="button">Sign in</button>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
|
Fixed Bottom navbar example
Same example as above but navbar is fixed to bottom by using the navbar-fixed-bottom class. See the following example.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE html>
<html>
<head>
<title>navbar example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<h1>navbar Example</h1>
<nav role="navigation">
<div class="container">
<!-- Navigation bar -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" placeholder="Search site">
</div>
<button type="submit">Go</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
|
navbar different color example
One of the ways you can change the default color of bootstrap navbar is by using your own CSS besides provided by Bootstrap. You can add the background color, border etc by using the <style> attribute in the main <div>, wrapping the navigation bar. The following example shows how you can do it.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE html>
<html>
<head>
<title>navbar example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<h1>navbar Example</h1>
<nav role="navigation">
<div class="container" style="background-color: darkgrey;">
<!-- Navigation bar -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li><a href="#" style="border:solid 1px green;">Home</a></li>
<li class="active"><a href="#">Products</a></li>
<li><a href="#" style="border:solid 1px green;">About</a></li>
<li><a href="#" style="border:solid 1px green;">Contact</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" placeholder="Search site">
</div>
<button type="submit">Go</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
|
This might look ugly, but you can add your creativity by using the style with inline CSS properties or add CSS classes or refer by ID in your own external CSS file.
Also see Twitter Bootstrap Tutorial | Bootstrap Table | Bootstrap Form
Leave A Comment?