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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
|
---
layout: docs
title: Navbar
group: components
---
The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
### Basics
Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` and either a color scheme class or custom styles.
- When using multiple components in a navbar, some [alignment classes](#alignment) are required.
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
### Branding
Name your company, product, or project with `.navbar-brand`.
{% example html %}
<nav class="navbar navbar-default">
<h3 class="navbar-brand">
<a href="#">Navbar</a>
</h3>
</nav>
{% endexample %}
### Navigation
Use `.nav-pills` within a navbar for basic navigation.
{% example html %}
<nav class="navbar navbar-default">
<ul class="nav nav-pills">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
{% endexample %}
### Inline forms
Add an `.inline-form` within the navbar with nearly any combination of form controls and buttons.
{% example html %}
<nav class="navbar navbar-default">
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</nav>
{% endexample %}
### Containers
Although it's not required, you can wrap a navbar in a `.container` to center it on a page, or add one within to only center the contents of the navbar.
{% example html %}
<div class="container">
<nav class="navbar navbar-default">
<h3 class="navbar-brand">
<a href="#">Navbar</a>
</h3>
</nav>
</div>
{% endexample %}
{% example html %}
<nav class="navbar navbar-default">
<div class="container">
<h3 class="navbar-brand">
<a href="#">Navbar</a>
</h3>
</div>
</nav>
{% endexample %}
### Alignment
Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
{% example html %}
<nav class="navbar navbar-default">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav nav-pills pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<ul class="nav nav-pills pull-right">
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
{% endexample %}
### Inverse color scheme
Replace `.navbar-default` with `.navbar-inverse` for a darker background color and white text.
{% example html %}
<nav class="navbar navbar-inverse">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav nav-pills pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</nav>
{% endexample %}
### Small navbar
Small navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the padding down, enables full-height navigation, and tweaks vertical alignment for search forms, buttons, and more. It's also available in both default and inverse schemes.
When moving from a regular navbar to a small one, be sure to update your inputs and buttons to use their small variations as well.
<div class="bd-example">
<nav class="navbar navbar-default navbar-sm">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button>
</form>
</nav>
<nav class="navbar navbar-inverse navbar-sm">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button>
</form>
</nav>
</div>
{% highlight html %}
<nav class="navbar navbar-default navbar-sm">
<!-- Navbar contents -->
</nav>
<nav class="navbar navbar-inverse navbar-sm">
<!-- Navbar contents -->
</nav>
{% endhighlight %}
### Collapsible content
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
{% example html %}
<div class="collapse" id="exCollapsingNavbar">
<div class="inverse p-a">
<h4>Collapsed content</h4>
<p>Toggleable via the navbar brand.</p>
</div>
</div>
<nav class="navbar navbar-default">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
☰
</button>
</nav>
{% endexample %}
For more complex navbar patterns, like those used in Bootstrap v3, use the `.navbar-toggleable-*` classes in conjunction with the `.navbar-toggler`. These classes override our responsive utilities to show navigation only when content is meant to be shown.
{% example html %}
<nav class="navbar navbar-default">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<h4>Collapsed on xs devices</h4>
<p>Toggleable via the navbar brand.</p>
</div>
</nav>
{% endexample %}
|