Navs

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

Basic nav

Uses no modifier classes. No supported active state by default, given highly customizable nature of nav styles.

Tabs

Note the .nav-tabs class requires the .nav base class.

{% highlight html %}

• Active
• Link
• Another link
• Disabled

{% endhighlight %}

Pills

Take that same HTML, but use .nav-pills instead:

{% highlight html %}

• Active
• Link
• Another link
• Disabled

{% endhighlight %}

Pills are also vertically stackable. Just add .nav-stacked.

{% highlight html %}

...

{% endhighlight %}

Justified

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

{% highlight html %}

...

...

{% endhighlight %}

Using dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Tabs with dropdowns

{% highlight html %}

...
• Dropdown
  ...
...

{% endhighlight %}

Pills with dropdowns

{% highlight html %}

...
• Dropdown
  ...
...

{% endhighlight %}