--- 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. - `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint. 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 %} ## Responsive behaviors Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-toggleable-*` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements. ### Toggler Navbar togglers can be left or right aligned with `.navbar-toggler-left` or `.navbar-toggler-right` modifiers. These are absolutely positioned within the navbar to avoid interference with the collapsed state. You can also use your own styles to position togglers. Below are examples of different toggle styles. With no `.navbar-brand` shown in lowest breakpoint: {% example html %} {% endexample %} With a brand name shown on the left and toggler on the right: {% example html %} {% endexample %} ### External content Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the `id` and `data-target` matching, that's easily done! {% example html %}

Collapsed content

Toggleable via the navbar brand.

{% endexample %}