--- layout: docs title: Navbar description: Documentation and examples for Bootstrap's powerful, responsive navigation header. group: components --- The navbar is a wrapper that positions branding, navigation, and other elements into a concise header. It's easily extensible and thanks to our Collapse plugin, it can easily integrate responsive behaviors. ## 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 `.float-*-left` and `.float-*-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 needed: - `.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](#collapsible-content) behaviors. - Inline forms with `.float-` utilities for form controls and components. - `.navbar-text` for adding vertically centered strings of text. Here's an example of all the sub-components included in a default, non-responsive light themed navbar. [See the responsive examples](#collapsible-content) for collapsing nav support. {% example html %} {% endexample %} ### Brand The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. {% example html %} {% endexample %} Adding images to the `.navbar-brand` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate. {% example html %} {% endexample %} {% example html %} {% endexample %} ### Nav 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`. Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s. {% example html %} {% endexample %} And because we use classes for our navs, you can avoid the list-based approach entirely if you like. {% example html %} {% endexample %} You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below. {% example html %} {% endexample %} ### Forms Place various form controls and components within a navbar with `.form-inline`. Align them with `.float-` utilities as needed. {% example html %} {% endexample %} Input groups work, too: {% example html %} {% endexample %} Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilites can be used to align different sized elements. {% example html %} {% endexample %} ### Text Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text. {% example html %} {% endexample %} Using our utility classes, you can change the alignment and appearance of your navbar text. {% example html %} {% endexample %} Similarly, you can use utility classes to align navbar text to other navbar elements like the brand and navigation (which are automatically floated already). {% 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 a [fixed or static top navbar](#placement). {% example html %}

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

Collapsed content

Toggleable via the navbar brand.

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