Online

Bootstrap - Navigation Elements

Bootstrap provides a few different options for styling navigation elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to share markup and states. Swap modifier classes to switch between each style.

Tabular Navigation or Tabs

The following example demonstrates the use of class .btn-group discussed in the above table -

Tabs Example :-

Result

Pills Navigation

To turn the tabs into pills, follow the same steps as above, use the class .nav-pills instead of .nav-tabs.

Example

Result

Justified Nav

You can make tabs or pills of equal widths as of their parent at screens wider than 768px using class .nav-justified along with .nav, .nav-tabs or .nav, .nav-pills respectively. On smaller screens, the nav links are stacked.

Example

Result

Disabled Links

For each of the .nav classes, if you add the .disabled class, it will create a gray link that also disables the :hover state as shown in the following example -

Example

Result

Dropdowns

Navigation menus share a similar syntax with dropdown menus. By default, you have a list item that has an anchor working in conjunction with some data-attributes to trigger an unordered list with a .dropdown-menu class.

Example

Result

Tabs With Dropdown Example