5.0 KiB
| 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.
Regarding accessibility
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.
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 <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. Use them to create tabbable regions with our tab JavaScript plugin.
{% example html %}
{% endexample %}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 %}