Bootstrap Navigation Elements
Bootstrap is offering a small number of different options for styling navigation elements. This tutorial is all about that we will discuss here briefly. Bootstrap have shared markup, starting with the base .nav class. Bootstrap also offers a helper class, to share markup and states. Swap modifier classes to switch between each style.
Tabular Navigation or Tabs
To make a tabbed navigation menu follow these steps:
-
Start by an essential unordered list with the base class of .nav
-
Then put the class .nav-tabs.
|
1 |
Pills Navigation
Basic pills
To change your tabs into pills, follow the same steps as above and use the class .nav-pills instead of .nav-tabs. Same like this following example code.
|
1 |
Verticle Pills
You can make the pills vertically by using this class .nav-stacked next to the classes .nav, .nav-pills. Following vertical pills example demonstrates this:
|
1 |
Justified Nav
You can easily create tabs or pills equal widths 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.
|
1 |
Disabled Links
For any of nav component like tabs or pills, if you add the .disabled, this will make gray links and remove the hover effects as shown in the following example.
|
1 |
This class will only change the <a>’s appearance, not its functionality. Use custom JavaScript to disable links here.
Dropdowns
Navigation menus share with dropdown menus a related code of syntax. By default a list item has an anchor working in combination of some data-attributes to trigger that list with a .dropdown-menu class.
Tabs with Dropdowns
Follow these steps to add dropdowns with tab:
-
Start by an essential unordered list with the base class of .nav
-
Then put the class .nav-tabs.
-
Add one more an unordered list with a .dropdown-menu class.
|
1 |
Pills with Dropdowns
If you want to do same thing like above with pills there is simple way, swap the .nav-tabs class with .nav-pills as shown in the following example.
|
1 |
