Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Create a tabbed navigation menu with Bootstrap

Bootable Web Development Front End Technology

To create a tabbed navigation menu, start with a basic unordered list with the base class of .nav and add class .nav-tabs. The navigation tab looks like the following on a web page −

Create a Navigation tab

Create a navigation tab with nav and nav-tabs −

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">About</a></li>
   <li><a href = "#">Products</a></li>
   <li><a href = "#">Contact Us</a></li>
</ul>

Set the Current Page

Above, we have set the Home as active, since we wanted it to be the current page −

<li class = "active"><a href = "#">Home</a></li>

Create a Tabbed Navigation Menu with Dropdown

Example

Let us see an example to create a tabbed navigation menu −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Example</title>
   <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
   <script src = "/scripts/jquery.min.js"></script>
   <script src = "/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
   <p>My Website</p>
   <ul class = "nav nav-tabs">
      <li class = "active"><a href = "#">Home</a></li>
      <li><a href = "#">About</a></li>
      <li><a href = "#">Products</a></li>
      <li><a href = "#">Contact Us</a></li>
   </ul>
</body>
</html>

Disable a Tabbed Navigation Menu Link

Example

The disable class is used to disable a menu link in Bootstrap −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Example</title>
   <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
   <script src = "/scripts/jquery.min.js"></script>
   <script src = "/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
   <p>My Website</p>
   <ul class = "nav nav-tabs">
      <li class = "active"><a href = "#">Home</a></li>
      <li><a href = "#">About</a></li>
      <li><a href = "#">Products</a></li>
      <li class = "disabled"><a href = "#">Jobs</a></li>
      <li><a href = "#">Contact Us</a></li>
   </ul>
</body>
</html>
Updated on: 2026-03-12T23:03:36+05:30

370 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements