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.

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

{% highlight html %} {% endhighlight %}

Requires JavaScript tabs plugin

For tabs with tabbable areas, you must use the tabs JavaScript plugin.

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

{% highlight html %} {% endhighlight %}

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

{% highlight html %} {% endhighlight %}

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.

Justified navbar nav links are currently not supported.

Safari and responsive justified navs

As of v7.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.


{% highlight html %} {% endhighlight %}

For any nav component (tabs or pills), add .disabled for gray links and no hover effects.

Link functionality not impacted

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

{% highlight html %} {% endhighlight %}

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

Tabs with dropdowns

{% highlight html %} {% endhighlight %}

Pills with dropdowns

{% highlight html %} {% endhighlight %}