Hello folks! welcome back to a new section of our tutorial on Bootstrap. In this tutorial guide, we will be studying about Bootstrap navigation elements.
Bootstrap gives a few different options for styling of navigation elements. All of them share 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.
Bootstrap gives a few different options for styling of navigation elements. All of them share 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
To create a tabbed navigation menu -
- Start with a basic unordered list with the basic .nav class.
- Add a .nav-tabs class.
Example
Following example demonstrates this -
<p>Tabs Example</p> <ul class = "nav nav-tabs"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Input Groups
Pills Navigation
Basic Pills
To turn the tabs into pills, follow the same steps as above, make use of the .nav-pills class instead of .nav-tabs.
Example
Following example demonstrates this -
<p>Pills Example</p> <ul class = "nav nav-pills"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul>
Output
When the above example is executed, it will produce the following result -
Vertical Pills
You can stack the pills vertically by making use of the .nav-stacked class along with the .nav, .nav-pills classes.
Example
Following example demonstrates this -
<p>Vertical Pills Example</p> <ul class = "nav nav-pills nav-stacked"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul>
Output
When the above example is executed, it will produce the following result -
Justified Nav
You can make tabs or pills of equal widths as of their parent at screens wider than 768 px using .nav-justified class along with .nav, .nav-tabs, or .nav-pills respectively. The nav links are stacked on smaller screens.
Example
Following example demonstrates this -
<p>Justified Nav Elements Example</p> <ul class = "nav nav-pills nav-justified"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul> <br> <br> <br> <ul class = "nav nav-tabs nav-justified"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul>
Output
When the above example is executed, it will produce the following 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.
Example
Following below is a simple example -
<p>Disabled Link Example</p> <ul class = "nav nav-pills"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li class = "disabled"><a href = "#">iOS(disabled link)</a></li> <li><a href = "#">VB.Net</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul> <br> <br> <ul class = "nav nav-tabs"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li> <li><a href = "#">Java</a></li> <li><a href = "#">PHP</a></li> </ul>
Output
When the above example is executed, it will produce the following result -
Dropdowns
Navigation menus share a very much alike syntax with dropdown menus. By default, you have a list item that has an anchor that works together with some data-attributes to trigger an unordered list with a .dropdown-menu class.
Tabs with Dropdowns
To add dropdowns to tabs -
- Start with a basic unordered list with the base class of .nav.
- Add the .nav-tabs class.
- Now add an unordered list with a class .dropdown-menu.
Example
Following example demonstrates this -
<p>Tabs With Dropdown Example</p> <ul class = "nav nav-tabs"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li class = "dropdown"> <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Java <span class = "caret"></span> </a> <ul class = "dropdown-menu"> <li><a href = "#">Swing</a></li> <li><a href = "#">jMeter</a></li> <li><a href = "#">EJB</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </li> <li><a href = "#">PHP</a></li> </ul>
Output
When the above example is executed, it will produce the following result -
Pills with Dropdowns
To do the same thing with pills, simply use the .nav-pills class instead of the .nav-tabs class.
Example
Following example demonstrates this -
<p>Pills With Dropdown Example</p> <ul class = "nav nav-pills"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li class = "dropdown"> <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Java <span class = "caret"></span> </a> <ul class = "dropdown-menu"> <li><a href = "#">Swing</a></li> <li><a href = "#">jMeter</a></li> <li><a href = "#">EJB</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </li> <li><a href = "#">PHP</a></li> </ul>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Forms
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Navbar.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.