--- layout: docs title: Navbar group: components --- 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 class (either `.navbar-default` or `.navbar-inverse`). - 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. - Use `.pull-left` and `.pull-right` to quickly align sub-components. - Ensure accessibility by using a `

` element or, if using a more generic element such as a `

`, 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-form` for vertically centering default-sized inputs and buttons. - `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors. Here's an example of all the sub-components included in a default, light navbar: {% example html %} {% endexample %} ## Color schemes 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. Here are some examples to show what we mean.

{% highlight html %} {% endhighlight %} ## 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 %}

{% endexample %} {% example html %} {% endexample %} ## Placement Navbars can be statically placed (their default behavior), or fixed to the top or bottom of the viewport. {% example html %} {% endexample %} {% example html %} {% endexample %} ## Collapsible content Our collapse plugin allows you to use a `

{% 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 %} {% endexample %}