--- 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 in a concise header. It's easily extensible and, thanks to our Collapse plugin, can easily integrate responsive behaviors. ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} ## How it works Here's what you need to know before getting started with the navbar: - Navbars require a wrapping `.navbar` and [color scheme](#color-schemes) classes. - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width. - Navbars and their contents are built with flexbox, providing easy alignment options via utility classes. - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. - 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. Read on for an example and list of supported sub-components. ## Supported content Navbars come with built-in support for a handful of sub-components. Choose 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. - `.inline-form` for form controls and more. Here's an example of all the sub-components included in a responsive light-themed navbar. {% 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 the `.navbar-nav` modifier correctly position your links. **Navbar navigation will grow to occupy as much horizontal space as possible** to keep your navbar contents aligned properly. 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`. {% example html %} {% endexample %} Align the contents of your inline forms with 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 utilities 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 %} ## Color schemes Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Chose from `.navbar-light` for use with light background colors, or `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.

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