Bootstrap - Navigation Elements

19RH1A05H6 Thanvi lahari Pendyala
Last Updated: May 13, 2022

Introduction

This article will discuss Bootstrap- Navigation Elements and how to implement them into your code. As a front-end developer, you might have heard about or seen navigation bars/elements but never knew how to implement one in your code? So first, let’s explore what bootstrap is to customize our code for a navbar.

Bootstrap

Bootstrap is an open-Source CSS(Cascading Style Sheets) framework used to build responsive, front-end websites. It is written in HTMLCSSLessSass, and Javascript. It includes HTML and CSS-based design templates for forms, typography, navigation, buttons, images, carousels, drop-downs, and much more. The recent version of Bootstrap is V5.1. In Bootstrap, navigation shares general markup and styles, from the base class .nav to the active and disabled states/classes, and swap modifier classes to switch between those styles.

You can import bootstrap into your code in two ways:

  1. Download bootstrap packages into your project folder.
  2. Import bootstrap using links.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Navigation

Navigation structure describes and connects all components on a website together for efficient usage and better presentation. <nav> tag is used for navigation in HTML. The common components of navigation in a website are menus, links, table of contents, and indexes. There are four types of navigations:

  1. Primary navigation
  2. Top bar navigation
  3. Footer navigation
  4. Sidebar navigation
     

Tabular Navigation or tabs:

To create a tabular navigation:

  1. Add .nav class to the <div> or any other list tags like <ul> 
  2. Add .nav-tabs to style them as a tabular navigation.
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">SVN</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">iOS</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">VB.Net</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Java</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">PHP</a>
  </li>
</ul>

 

Pill Navigation or pills:

The Pills navigation turns tabs into pills and for that .nav-tabs should be replaced with .nav-pills after creating a <div> or <ul> with .nav base class.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">SVN</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">iOS</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">VB.Net</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Java</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">PHP</a>
  </li>
</ul>

 

Fill and Justify:

This navigation extends the contents to the fullest space available. We use .nav-fill or .nav-justify. The fill and justify can be used on both table and pill navigation.

  1. nav-justify – fits the contents to occupy the whole width and provides equal width to each .nav-item.
<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

 

2. nav-fill - fits the contents to occupy the whole width and but the width to each .nav-item might not be equal.

<ul class="nav nav-tabs nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Disabled links:

This navigation disables the .nav-item and restricts the user from accessing the content. The .disabled class is used to disable any item in the navbar. It only styles the item to let users know that they cannot access it, but the functionality is provided by javascript or typescript. So to see a properly implemented disabled navbar item, javascript functions are a must.

 

  1. Pill navigation:
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">SVN</a>
  </li>
  <li class="nav-item disabled">
    <a class="nav-link" href="#">iOS(disabled link)</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">VB.Net</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Java</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">PHP</a>
  </li>
</ul>

 

2. Tabular navigation:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">SVN</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">iOS</a>
  </li>
  <li class="nav-item disabled">
    <a class="nav-link" href="#">VB.Net(disabled link)</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Java</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">PHP</a>
  </li>
</ul>

 

Navigation with dropdowns:

This navigation supports navbar items with dropdowns to choose further among the navbar items. It has a syntax similar to drop-down menus in bootstrap. To add the dropdown to the navbar:

  • Create a new <div> or unordered list <ul> with base class .nav.
  • Add .nav-tabs or .nav-pills for navigation.
  • Create an unordered sublist in navbar with class .dropdown-menu to style a dropdown menu.


The pills and tabs navigation are similar while working with dropdowns; only the navigation type indicator class changes according to the requirements.
 

Tabular navigation:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">SVN</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">iOS</a>
  </li>
  <li class="nav-item disabled">
    <a class="nav-link" href="#">VB.Net(disabled link)</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>
         <vli><a href = "#">Separated link</a></li>
     </ul>
</li>
  <li class="nav-item">
    <a class="nav-link" href="#">PHP</a>
  </li>
</ul>

 

2. Pills navigation:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">SVN</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">iOS</a>
  </li>
  <li class="nav-item disabled">
    <a class="nav-link" href="#">VB.Net(disabled link)</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>
         <vli><a href = "#">Separated link</a></li>
     </ul>
</li>
  <li class="nav-item">
    <a class="nav-link" href="#">PHP</a>
  </li>
</ul>

Note: We can omit .nav-item in a <nav> based navigation, because only .nav-link is used to style the elements. The .nav-item tells the developer that the coded section is an item in a navbar and helps the readers to understand code better.

Frequently Asked Questions

  1. What is bootstrap?
    Ans: Bootstrap is an open-Source front-end development framework used to create responsive websites and applications that adjust the width according to the devices.
     
  2. Why use bootstrap instead of CSS? 
    Ans: Bootstrap simplifies lengthy CSS codes with predefined classes that are not available in CSS and creates responsive websites.
     
  3. Why do we give .nav, .nav-tabs or .nav-pills in a class?
    Ans: The .nav generates navigation in the bootstrap navbar. The .nav-tab indicates tabular navigation, and .nav-pills indicates it should generate pill navigation in the navbar.
     
  4. What is the difference between pills and tabs?
    Ans: The .nav-tabs generate a tabbed interface to separate data in the same components/panes, while the .nav-pills generate separate elements to speed up browsing.

Key Takeaways

Hey everyone, let’s discuss what we learned in this article in brief:

  • Bootstrap provides responsive and efficient navigation that cannot be achieved using CSS. An efficient bootstrap design needs javascript/typescript for the functioning of elements.
  • There are different types of navigations: tabular navigation, pills navigation, navigation with dropdown, navigation with flex utilities, vertical and horizontal navigation, and fill and justify navigation.
  • At last, implementation of efficient code is being provided to every type of navigation to help you implement your customized navigation in your project.
     

Isn’t bootstrap interesting and engaging? Build cool websites and projects using bootstrap to engage more in web development. We found the perfect course for you to enhance your development skills in web development. Check this out and become the best developer.
 

Happy Learning!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think