Open In App

How to create a tabbed navigation menu in Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. The navigation bar is placed at the top of the page.

Tab-based navigations are one of the most effective ways to display a large amount of content on a single web page using tabbed sections. The user can quickly access the content by switching between the panes without leaving the page.

Approach: To create a tabbed navigation menu, create a basic unordered list with list items as links. Then add classes nav and nav-tabs of bootstrap to unordered list and nav-items class to list items.

Example 1:

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  
    <link
      rel="stylesheet"
      href=
  
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
  </head>
  <body>
    <center>
      <h1 style="color: green">GeeksforGeeks</h1>
      <h2>Navigation Bar</h2>
    </center>
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" 
           aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Courses</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Articles</a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link disabled"
          href="#"
          tabindex="-1"
          aria-disabled="true">
          Not Servicable
        </a>
      </li>
    </ul>
  </body>
</html>


Output:

navigation tabs

Example 2: The following code shows a dropdown in one of the navigational tab.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Navigation Bar</title>
  
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  
    <link
      rel="stylesheet"
      href=
  
    <script
      src=
      integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous">
     </script>
  </head>
  <body>
    <center>
      <h1 style="color: green">GeeksforGeeks</h1>
      <h2>Navigation Bar</h2>
    </center>
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#"> Home </a>
      </li>
      <li class="nav-item dropdown">
        <a
          class="nav-link dropdown-toggle"
          data-bs-toggle="dropdown"
          href="#"
          role="button"
          aria-expanded="false">
          Courses
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">for 10</a></li>
          <li><a class="dropdown-item" href="#">for 12</a></li>
          <li><a class="dropdown-item" href="#">Graduation</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Articles</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#"> Not Servicable </a>
      </li>
    </ul>
  </body>
</html>


Output:



Last Updated : 14 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads