Open In App

How to create a Pills navigation menu in Bootstrap?

Last Updated : 26 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will learn how to make a Pills navigation menu in Bootstrap 5. Pills are a great navigation style to implement for your websites as it enhances the user experience and navigation flow of your website. Creating a pills navigation menu is simple and easy, all you have to do is to include the right bootstrap classes and understand what function these classes will perform. We will discuss all the cases where pill navigation is beneficial to use. Let's begin it one by one. 

There are 2 ways to apply the bootstrap in the HTML:

  • By using the Bootstrap CDN link
  • Download the bootstrap from the official site.

For more details related to the installation & configuration process, please refer to the Bootstrap Introduction and Installation article.

Creating a Simple Pills Navigation Menu: In order to create a simple pills navigation menu, you just need to add the class .nav-pills to your nav element along with .nav class, which is the base class for every navigation style available in bootstrap. The .nav class element wraps in all the .nav-link class elements. The .nav-link class should be given to all link elements present in the navbar.

Example: This example shows the basic implementation of the pill 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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous" />
</head>

<body>
    <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>
    </nav>
    <p class="p-4">
        GeeksforGeeks - A Computer Science portal for geeks.
        It contains well written, well thought and well
        explained computer science and programming
        articles, quizzes and practice/competitive
        programming/company interview Questions.
    </p>

</body>

</html>

Explanation:

  • .p-4 class implements padding for the element.
  • .bg-waring implements a background color of a shade of yellow.
  • .bg-dark implements a dark background.
  • .active class depicts the user's current view of your webpage.
  • .text-warning gives the text color as yellow.

Output:

A simple pills navigation menu

Creating a right-aligned pills navigation: To right-align the elements, you can use .ms-auto class to the element.

Example: In this example, we have used the .ms-auto class with the Signup that is shifted to the right side.

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         rel="stylesheet"
         integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
         crossorigin="anonymous"/>
   </head>
   <body>
      <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>
      <p class="p-4">
         GeeksforGeeks - A Computer Science portal for geeks.
         It contains well written, well thought and well
         explained computer science and programming
         articles, quizzes and practice/competitive
         programming/company interview Questions.
      </p>

   </body>
</html>

Output:

Right Aligned Pills Navigation

Creating a pills navigation that spans fullscreen: To make Pills that will take the full width of the screen, we can use the .nav-fill class. This class fills up the entire screen by manipulating the width of the .nav-link items.

Example: In this example, we have used the .nav-fill class that will create pill navigation spanning the fullscreen.

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         rel="stylesheet"
         integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
         crossorigin="anonymous" />
   </head>
   <body>
      <nav class="nav nav-pills nav-fill 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>
      <p class="p-4">
         GeeksforGeeks - A Computer Science portal for geeks. 
         It contains well written, well thought and well explained
         computer science and programming articles, quizzes and
          practice/competitive programming/company interview
         Questions.
      </p>

   </body>
</html>

Output:

Full Screen spanning pills navigation menu

Creating a Pills navigation with each link taking equal width: From the previous example, although, the nav links spanned full screen, each nav link took different widths in order to do so. In this example, we will see how we can span full screen along with each nav link taking equal horizontal width/space. For equal-widths, we use the class .nav-justified in the nav element instead of .nav-fill class.

Example: This example shows the 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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous" />
  </head>
  <body>
    <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>
    <p class="p-4">
      GeeksforGeeks - A Computer Science portal for geeks. 
      It contains well written, well thought and well explained 
      computer science and programming articles, quizzes and
      practice/competitive programming/company interview
      Questions.
    </p>

  </body>
</html>

Output:

Justified pills navigation menu

Tip: Use the Chrome web developer tool for inspecting mode to see the difference.

Creating a fixed pills navigation: Fixed navigation means the navbar will be fixed to the top of the screen while you scroll. To implement this feature, add class .fixed-top to the nav element.

Example: This example illustrates the fixed pill navbar by using the .fixed-top class.

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous"/>
  </head>
  <body>
    <nav class="nav nav-pills fixed-top 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>

    <script
      src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous" >
    </script>
  </body>
</html>

Output:

Fixed Pills Navigation

Creating Pills with drop-down navigation: To create pills with dropdown navigation, we need to include the  .dropdown class to a  div that wraps in elements with .dropdown-menu class and .dropdown-toggle class which is given to a nav-link element wrapped inside of it.

The .dropdown-menu class is given to an unordered list that contains all the menu content that appears in the dropdown menu. It further consists of elements of classes .dropdown-item indicating each item present inside the menu.

The data-bs-toggle attribute should be given to the .nav-link element with the value of 'dropdown'  as on click we will be toggling the dropdown view. Also, the role attribute of the .nav-link element should be set to 'button'.

Example: This example illustrates the navbar pills with the drop-down feature. 

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous"/>
  </head>
  <body>
    <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>
      <div class="dropdown">
        <a
          class="nav-link text-warning"
          role="button"
          data-bs-toggle="dropdown"
          aria-expanded="false"
          href="#">Careers
        </a>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" 
               href="#">Web dev</a>
          </li>
          <li>
            <a class="dropdown-item" 
               href="#">Mobile dev
            </a>
          </li>
          <li>
            <a class="dropdown-item" 
                 href="#">ML dev
            </a>
          </li>
        </ul>
      </div>
      <a class="nav-link text-warning" 
         href="#">Contact Us
      </a>
    </nav>

    <p class="p-4">
      GeeksforGeeks - A Computer Science 
      portal for geeks. It contains well
      written, well thought and well 
      explained computer science and programming
      articles, quizzes and practice/
      competitive programming/company interview
      Questions.
    </p>


    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
  </body>
</html>

Output:

Pills navigation with dropdown menu

Creating a collapsible pills navigation menu: To create a collapsible pills navigation menu, use a button with class .navbar-toggler with attributes data-bs-toggle and data-bs-target. Within the button span an element with class .navbar-toggler-icon. Here, we have also used fontawesome to get the hamburger menu icon. Then, Wrap the .nav-links elements with class .navbar-collapse and .collapse and id of #navbar-collapse. Use the class .collapse as a value for the attribute data-bs-toggle and the id as a value for the data-bs-target attribute.

Example: This example illustrates the collapsible 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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
</head>

<body>
    <nav class="nav nav-pills p-4 bg-dark">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbar-collapse">
            <span class="navbar-toggler-icon">
                <i class="fas fa-bars text-white fa-2x"></i>
            </span>
        </button>
        <div class="collapse navbar-collapse text-white" id="navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item mt-4 pl-3">
                    <a class="nav-link active bg-warning" aria-current="true"
                        href="#">Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-warning" href="#">About Us </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-warning" href="#">Careers </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-warning" href="#">Contact Us </a>
                </li>
            </ul>
        </div>
    </nav>

    <p class="p-4">
        GeeksforGeeks - A Computer Science portal
        for geeks. It contains well written, well
        thought and well explained computer science
        and programming articles, quizzes and
        practice/competitive programming/company
        interview Questions.
    </p>

    <script
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
        </script>
</body>

</html>

Output:


Next Article
How to create a tabbed navigation menu in Bootstrap?

E
everlyprecia
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox