Bootstrap | Navigation Elements

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.

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 -

READ: Bootstrap | Helper Classes

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.