Skip to content
Related Articles

Related Articles

How to create a tabbed pills and vertical pills navigation menu in Bootstrap ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 31 Oct, 2021

In this article, we will learn about tabbed pills and the vertical pills navigation menu in Bootstrap, & will understand their implementation through the examples. These kinds of navigation menus are used to decorate the navbar in a different fashion with a specific distinct navigation style to enhance the user experience and navigation flow of the website along with helping to create a simple and easy navigation menu using Bootstrap pre-defined classes. We will discuss each navigation style sequentially. Let’s begin with creating a simple menu.

Simple Menu: This menu is used in the navigation bar to link the many other pages to the current page. For creating the simple navbar, we can use the list-inline class following with listing the items.

Syntax:

<ul class="list-inline">
    <li><a href="#">Element 1</a></li>
    <li><a href="#">Element 2</a></li>
</ul>

Example: In this example, we have created a simple menu.

 

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="container">
        <center>
            <h1 class="text-success">
              GeeksforGeeks
            </h1>
        </center>
        <h2>Simple Menu</h2>
        <ul class="list-inline">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</body>
  
</html>


Output:

Tab: For creating the tab menu, we will use .nav-tabs class to generate a tabbed interface along with using the active class to make the current tab active.

Syntax:

<ul class="nav nav-tabs">
   <li class="active"><a href="#">Element 1</a></li>
   <li><a href="#">Element 2</a></li>
   <li><a href="#">Element 3</a></li>
</ul>

Example: This example describes the Bootstrap tab menu.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="container">
        <center>
            <h1 class="text-success">
              GeeksforGeeks
            </h1>
        </center>
        <h3>Tabbed Menu</h3>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</body>
  
</html>


Output:

Pill: For creating a simple pills navigation menu, we will add the class .nav-pills to the nav element along with .nav class, which is the base class for every navigation style available in bootstrap along with using the active class to make the current tab active.

Syntax:

<ul class="nav nav-pills">
    <li class="active"><a href="#">Element 1</a></li>
    <li><a href="#">Element 2</a></li>
    <li><a href="#">Element 3</a></li>
</ul>

Example: This example describes the Bootstrap pill navigation bar.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href=
</head>
  
<body>
    <div class="container">
        <center>
            <h1 class= "text-success">
              GeeksforGeeks
            </h1>
        </center>
        <h3>Pills</h3>
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</body>
  
</html>


Output:

Vertical Pill: To create the vertical pills, we will use .nav-pills  & nav-stacked class along with .nav class as a base class for every navigation style available in bootstrap along with using the active class to make the current tab active.

Syntax:

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Element 1</a></li>
    <li><a href="#">Element 2</a></li>
    <li><a href="#">Element 3</a></li>
</ul>

Example: This example describes the Bootstrap vertical pills navigation bar.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="container">
        <center>
            <h1 class="text-success">
              GeeksforGeeks
            </h1>
        </center>
        <h3>Vertical Pills</h3>
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</body>
  
</html>


Output:

Right-aligned navigation menu:  To right-align the elements, you can use the .ms-auto class to the element.

Example: This example describes the Bootstrap right-aligned navigation menu.

HTML




<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width,
        initial-scale=1.0" />
    <title>Pills navigation menu</title>
    <link href=
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous"/>
</head>
    
<body>
    <center>
    <h1 class="text-success">GeeksforGeeks</h1>
    </center>
    <nav class="nav nav-pills p-4 bg-dark">
        <a class="nav-link active bg-warning"
           aria-current="true"
           href="#">Home
        </a>
        <a class="nav-link text-warning"
           href="#">About Us
        </a>
        <a class="nav-link text-warning"
           href="#">Careers
        </a>
        <a class="nav-link text-warning"
           href="#">Contact Us
        </a>
        <a class="nav-link text-warning ms-auto"
           href="#">Sign up
        </a>
    </nav>
</body>
    
</html>


Output:

Justified pills navigation menu: For the equal-widths, we use the class .nav-justified in the nav element.

Example: This example describes the Bootstrap justified pills navigation menu.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width,
                initial-scale=1.0" />
    <title>Pills navigation menu</title>
    <link href=
            rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous" />
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
    </center>
    <nav class="nav nav-pills nav-justified p-4 bg-dark">
    <a class="nav-link active bg-warning"
       aria-current="true"
       href="#">Home
    </a>
    <a class="nav-link text-warning"
        href="#">About Us
    </a>
    <a class="nav-link text-warning"
       href="#">Careers
    </a>
    <a class="nav-link text-warning"
       href="#">Contact Us
    </a>
    </nav>
</body>
  
</html>


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!