Navbar
navbar.less
Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
Default Navbar
Justified navbar nav links are currently not supported.
Brand Image
Replace the navbar brand with your own image by swapping the text for an
<img>. Since the .navbar-brand has its own padding and height, you may
need to override some CSS depending on your image.
Forms
Place form content within .navbar-form for proper vertical alignment and
collapsed behavior in narrow viewports. Use the alignment options to decide
where it resides within the navbar content.
As a heads up, .navbar-form shares much of its code with .form-inline via
mixin. Some form controls, like input groups, may require fixed widths to
be show up properly within a navbar.
Mobile device caveats
There are some caveats regarding using form controls within fixed elements on mobile devices. See our browser support docs for details.
Always add labels
Screen readers will have trouble with your forms if you don't include a label
for every input. For these inline forms, you can hide the labels using the
.sr-only class. There are further alternative methods of providing a label
for assistive technologies, such as the aria-label, aria-labelledby or
title attribute. If none of these is present, screen readers may resort to
using the placeholder attribute, if present, but note that use of
placeholder as a replacement for other labelling methods is not advised.
Buttons
Add the .navbar-btn class to <button> elements not residing in a <form>
to vertically center them in the navbar.
Context-specific usage
Like the standard button classes, .navbar-btn can be used on
<a> and <input> elements. However, neither .navbar-btn nor the
standard button classes should be used on <a> elements within .navbar-nav.
Text
Wrap strings of text in an element with .navbar-text, usually on a
<p> tag for proper leading and color.
Non-Nav Links
For folks using standard links that are not within the regular navbar
navigation component, use the .navbar-link class to add the proper colors for
the default and inverse navbar options.
Component Alignment
Align nav links, forms, buttons, or text, using the .navbar-left or
.navbar-right utility classes. Both classes will add a CSS float in the
specified direction. For example, to align nav links, put them in a separate
<ul> with the respective utility class applied.
These classes are mixin-ed versions of .pull-left and .pull-right, but
they're scoped to media queries for easier handling of navbar components
across device sizes.
Right aligning multiple components
Navbars currently have a limitation with multiple .navbar-right classes.
To properly space content, we use negative margin on the last .navbar-right
element. When there are multiple elements using that class, these margins
don't work as intended.
We'll revisit this when we can rewrite that component in v4.
Fixed to Top
Add .navbar-fixed-top and include a .container or .container-fluid to
center and pad navbar content.
Body padding required
The fixed navbar will overlay your other content, unless you add padding to
the top of the <body>. Try out your own values or use our snippet below.
Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
Fixed to Bottom
Add .navbar-fixed-bottom and include a .container or .container-fluid
to center and pad navbar content.
Body padding required
The fixed navbar will overlay your other content, unless you add padding to
the top of the <body>. Try out your own values or use our snippet below.
Tip: By default, the navbar is 50px high.
body { padding-bottom: 70px; }
Make sure to include this after the core Bootstrap CSS.
Static Top
Create a full-width navbar that scrolls away with the page by adding
.navbar-static-top and include a .container or .container-fluid to center
and pad navbar content.
Unlike the .navbar-fixed-* classes, you do not need to change any padding
on the body.
Inverted Navbar
Modify the look of the navbar by adding .navbar-inverse.
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
@grid-float-breakpointvariable or add your own media query.Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the
.navbar-collapse.The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than
@grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least@grid-float-breakpointin width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).Make navbars accessible
Be sure to use a
<nav>element or, if using a more generic element such as a<div>, add arole="navigation"to every navbar to explicitly identify it as a landmark region for users of assistive technologies.