Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a tabbed navigation menu in Bootstrap ?

  • Difficulty Level : Expert
  • Last Updated : 14 Aug, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!