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.
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
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
{:toc}
### Basics
## Basics
Here's what you need to know before getting started with the navbar:
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.
- Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`).
- When using multiple components in a navbar, some [alignment classes](#alignment) are required.
- 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.
- 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.
- 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
## Supported content
Name your company, product, or project with `.navbar-brand`.
Navbars come with built-in support for a handful of sub-components. Mix and match from the following as you need:
{% example html %}
-`.navbar-brand` for your company, product, or project name
<navclass="navbar navbar-default">
-`.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
<h3class="navbar-brand">
-`.navbar-form` for vertically centering default-sized inputs and buttons.
<ahref="#">Navbar</a>
</h3>
</nav>
{% endexample %}
### Navigation
Here's an example of all the sub-components included in a default, light navbar:
Use `.nav-pills` within a navbar for basic navigation.
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 %}
<divclass="container">
<navclass="navbar navbar-default">
<h3class="navbar-brand">
<ahref="#">Navbar</a>
</h3>
</nav>
</div>
{% endexample %}
{% example html %}
<navclass="navbar navbar-default">
<divclass="container">
<h3class="navbar-brand">
<ahref="#">Navbar</a>
</h3>
</div>
</nav>
{% endexample %}
### Alignment
Use `.pull-left` or `.pull-right` to align multiple elements within the 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.
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.
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.
