The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. 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 a [color scheme](#color-schemes).
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Use `.pull-*-left` and `.pull-*-right` to quickly align sub-components.
- 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.
## Supported content
Navbars come with built-in support for a handful of sub-components. Mix and match from the following as you need:
-`.navbar-brand` for your company, product, or project name
-`.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
-`.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors.
Here's an example of all the sub-components included in a default, light navbar:
Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.
Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.
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 a [fixed or static top navbar](#placement).
{% example html %}
<divclass="container">
<navclass="navbar navbar-light bg-faded">
<aclass="navbar-brand"href="#">Navbar</a>
</nav>
</div>
{% endexample %}
{% example html %}
<navclass="navbar navbar-light bg-faded">
<divclass="container">
<aclass="navbar-brand"href="#">Navbar</a>
</div>
</nav>
{% endexample %}
## Placement
Navbars can be statically placed (their default behavior), static without rounded corners, or fixed to the top or bottom of the viewport.
<spanclass="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
</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.
