Bootstrap Navigation Elements

In this chapter, we will explain some of the options Bootstrap provides for defining navigation elements. They use the same markup and base class **.nav**. Bootstrap also provides a helper class for sharing markup and state. By changing the modifier class, you can switch between different styles. ## Tabs or Pills Create a tab-style navigation menu: * Start with an unordered list with the class **.nav**. * Add the class **.nav-tabs**. The following example demonstrates this: ## Example

Tab-style navigation menu

[Try it »](#) The result is as follows: ![Image 1: Tab-style navigation menu](#) ## Pill-style Navigation Menu ### Basic Pill-style Navigation Menu If you need to change the tabs to a pill style, simply use the class **.nav-pills** instead of **.nav-tabs**. The other steps are the same as above. The following example demonstrates this: ## Example

Basic pill-style navigation menu

[Try it »](#) The result is as follows: ![Image 2: Basic pill-style navigation menu](#) ### Vertical Pill-style Navigation Menu You can use the class **.nav-stacked** along with **.nav** and **.nav-pills** to stack the pills vertically. The following example demonstrates this: ## Example

Vertical pill-style navigation menu

[Try it »](#) The result is as follows: ![Image 3: Vertical pill-style navigation menu](#) ## Justified Navigation You can make the tab or pill navigation menu equal in width to its parent element on screens wider than 768px by using the class **.nav-justified** along with **.nav** and either **.nav-tabs** or **.nav-pills**. On smaller screens, the navigation links will stack. The following example demonstrates this: ## Example

Justified navigation elements

[Try it »](#) The result is as follows: ![Image 4: Justified navigation elements](#) ## Disabled Links For each **.nav** class, adding the **.disabled** class will create a grayed-out link and also disable the **:hover** state for that link, as shown in the following example: ## Example

Disabled links in navigation elements

[Try it »](#) The result is as follows: ![Image 5: Disabled links in navigation elements](#) > !(#)This class only changes the appearance of the tag, not its functionality. Here, you need to use custom JavaScript to disable the link. ## Dropdown Menus Navigation menus use similar syntax to dropdown menus. By default, the anchor of the list item works with some data attributes to trigger an unordered list with the class **.dropdown-menu**. ### Tabs with Dropdown Menu The steps to add a dropdown menu to a tab are as follows: * Start with an unordered list with the class **.nav**. * Add the class **.nav-tabs**. * Add an unordered list with the class **.dropdown-menu**. ## Example

Tabs with dropdown menu

[Try it »](#) The result is as follows: ![Image 7: Tabs with dropdown menu](#) ### Pills with Dropdown Menu The steps are the same as creating tabs with a dropdown menu, except you need to change the **.nav-tabs** class to **.nav-pills**, as shown in the following example: ## Example

Pills with dropdown menu

[Try it »](#) The result is as follows: ![Image 8: Pills with dropdown menu](#) * * * ## More Navigation Component Examples ### Tabs and Pills | Class | Description | Example | | --- | --- | --- | | .nav nav-tabs | Tabs | (#) | | .nav nav-pills | Pills | (#) | | .nav nav-pills nav-stacked | Pills stacked vertically | (#) | | .nav-justified | Justified tabs. On screens larger than 768px, the .nav-justified class makes tabs or pills equal in width. On smaller screens, the navigation links stack. | (#) | | .disabled | Disabled tabs | (#) | | Tabs with dropdown menu | (#) | | Pills with dropdown menu | (#) | | .tab-content | Used with .tab-pane and data-toggle="tab" (data-toggle="pill") to set the content corresponding to the tab to change as the tab switches. | (#) | | .tab-pane | Used with .tab-content and data-toggle="tab" (data-toggle="pill") to set the content corresponding to the tab to change as the tab switches. | (#) |

YouTip

Bootstrap Navigation Elements

📂 Categories