--- layout: page title: Navs --- Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style. ## Base nav Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but **not the active state**. {% example html %}

{% endexample %} Classes are used throughout, so your markup can be super flexible. Use `

` element. {% example html %} {% endexample %} ## Tabs Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. {% example html %}

{% endexample %}

Requires JavaScript tabs plugin

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

## Pills Take that same HTML, but use `.nav-pills` instead: {% example html %}

{% endexample %} ## Stacked pills Just add `.nav-stacked` to the `.nav.nav-pills`. {% example html %}

{% endexample %} ## Using dropdowns Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}javascript/#dropdowns). ### Tabs with dropdowns {% example html %}

{% endexample %} ### Pills with dropdowns {% example html %}

{% endexample %}