mdb-ui-kit/docs/components/navbar.md

layout	title	group
docs	Navbar	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.
• Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
• Use .pull-*-left and .pull-*-right to quickly align sub-components.
• Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, 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 behaviors.

Here's an example of all the sub-components included in a default, light navbar:

{% example html %}

Navbar

• Home (current)
• Features
• Pricing
• About

Search {% endexample %}

Brand

The .navbar-brand can be applied to most elements, but an anchor works best.

{% example html %}

Navbar

Navbar

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

• Home (current)
• Features
• Pricing
• About

{% endexample %}

And because we use classes for our navs, you can avoid the list-based approach entirely if you like.

{% example html %}

Home (current) Features Pricing About

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

Navbar

• Home (current)
• Features
• Pricing
• About

Search Navbar

• Home (current)
• Features
• Pricing
• About

Search Navbar

• Home (current)
• Features
• Pricing
• About

Search

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

{% example html %}

Navbar

{% endexample %}

{% example html %}

Navbar

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

Full width {% endexample %}

{% example html %}

Fixed top {% endexample %}

{% example html %}

Fixed bottom {% endexample %}

Collapsible content

Our collapse plugin allows you to use a <button> or <a> to toggle hidden content.

{% example html %}

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

☰

Responsive navbar

• Home (current)
• Features
• Pricing
• About

{% endexample %}