--- layout: page title: Navbar group: components --- 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 * 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 either a color scheme class or custom styles. - 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. - 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. ### Branding Name your company, product, or project with `.navbar-brand`. {% example html %} {% endexample %} ### Navigation Use `.nav-pills` within a navbar for basic navigation. {% example html %} {% endexample %} ### Inline forms Add an `.inline-form` within the navbar with nearly any combination of form controls and buttons. {% example html %} {% endexample %} ### 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 %} ### Alignment Use `.pull-left` or `.pull-right` to align multiple elements within the navbar. {% example html %} {% endexample %} ### Inverse color scheme Replace `.navbar-default` with `.navbar-inverse` for a darker background color and white text. {% example html %} {% endexample %} ### Small 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. 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.

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