twbs--bootstrap/docs/components/navs.md

layout	title
page	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 %}

• Link
• Link
• Another link
• Disabled

{% endexample %}

Classes are used throughout, so your markup can be super flexible. Use <ul>s like above, or roll your own with say a <nav> element.

{% example html %}

Active Link Another link Disabled {% endexample %}

Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

{% example html %}

• Active
• Link
• Another link
• Disabled

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

• Active
• Link
• Another link
• Disabled

{% endexample %}

Stacked pills

Just add .nav-stacked to the .nav.nav-pills.

{% example html %}

• Active
• Link
• Another link
• Disabled

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

• Active
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
• Another link
• Disabled

{% endexample %}

Pills with dropdowns

{% example html %}

• Active
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
• Another link
• Disabled

{% endexample %}