Bootstrap/docs/components/navbar.md

layout	title
page	Navbar

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 are required.
• Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
• 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.

Branding

Name your company, product, or project with .navbar-brand.

{% example html %}

Navbar

{% endexample %}

Navigation

Use .nav-pills within a navbar for basic navigation.

{% example html %}

• Home (current)
• Features
• Pricing
• About

{% endexample %}

Inline forms

Add an .inline-form within the navbar with nearly any combination of form controls and buttons.

{% example html %}

Search {% endexample %}

Containers

Although it's not required, you can wrap a navbar in a .container or add one within for basic horizontal control.

{% example html %}

Navbar

{% endexample %}

{% example html %}

Navbar

{% endexample %}

Alignment

Use .pull-left or .pull-right to align multiple elements within the navbar.

{% example html %}

Navbar

• Home (current)
• Features
• Pricing
• About

• Help
• Sign out

{% endexample %}

Inverse color scheme

Replace .navbar-default with .navbar-inverse for a darker background color and white text.

{% example html %}

Navbar

• Home (current)
• Features
• Pricing
• About

Search {% endexample %}

Condensed

Condensed 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.

{% example html %}

Navbar

• Home (current)
• Features
• Pricing
• About

Search

Navbar

• Home (current)
• Features
• Pricing
• About

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

☰

Collapsed on xs devices

Toggleable via the navbar brand.

{% endexample %}