--- layout: docs title: Navbar group: components --- [//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs {% callout info %} **Bootstrap Reference Documentation** This is reference documentation from Bootstrap. It is being rendered with Material Design for Bootstrap to demonstrate default styling. See addons(TODO: add link) for additional Material Design elements. {% endcallout %} 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](#color-schemes). - 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-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors. Here's an example of all the sub-components included in a default, light navbar: {% example html %} {% endexample %} ### Brand The `.navbar-brand` can be applied to most elements, but an anchor works best. {% 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`. {% 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 %} ## 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 `

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