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.

Using navs for tab panels requires JavaScript tabs plugin

For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.

Make navs used as navigation accessible

If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

Tabs

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

{% highlight html %}

{% endhighlight %}

Pills

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

{% highlight html %}

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

Justified navbar nav links are currently not supported.

Safari and responsive justified navs

As of v9.1.2, 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 %}

Disabled links

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

Disabled link

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