How to create a tabbed pills and vertical pills navigation menu in Bootstrap ?
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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
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:
Similar Reads
How to create a tabbed navigation menu in Bootstrap?
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 wa
2 min read
How to create a Pills navigation menu in Bootstrap?
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 i
7 min read
How to create vertical left-right timeline in Bootstrap ?
A vertical left-right timeline in Bootstrap can be an effective way to visualize a series of events or milestones in chronological order. Its usage extends to various contexts, including project timelines, historical timelines, and personal achievements.Syntax to create vertical left-right timeline:
3 min read
How to force tab-navigation to stay in place using Bootstrap ?
Tab-navigation: Tabs are made with <ul class="nav nav-tabs"> and we use the <li class="active"> element to mark the current page. To fix the position of navigation tab style, position: fixed; property is used. Syntax: <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class
3 min read
How to create a Responsive Bottom Navigation Menu with CSS and JavaScript.
A responsive bottom navigation menu provides mobile-friendly access to important links. We will see how to create a responsive bottom navigation menu that adjusts to different screen widths. The menu will include elements like Home, Contact, and About. When viewed on a smaller screen, a hamburger me
2 min read
How to create a navigation bar using React-Bootstrap?
React-Bootstrap is a front-end framework that was designed with React in mind. The NavBar Component is a navigation header that is responsive and powerful. It supports navigation, branding, and many other related features. In this article, we are going to implement a navigation bar using React Boots
2 min read
How to Create a Responsive Table in Bootstrap ?
A responsive table in Bootstrap adjusts its layout to fit different screen sizes, ensuring readability and usability on all devices. It typically involves using classes like .table-responsive or custom CSS to enable horizontal scrolling on smaller screens.Table of Content Using the table-responsive
4 min read
How to create Responsive Bottom Navigation Bar using Bootstrap ?
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 word "Navigation" means the science of moving from one place to another. In this article, we create a
5 min read
How to create a menu using navbar-inverse in Bootstrap ?
In this article, we will learn how to create a menu using the navbar-inverse in Bootstrap & will also understand its implementation through the example. The menu bar is a very important part while making a navigation bar for the website. We can create a menu bar along with inverse the color of t
5 min read
How to create a vertical or basic form using Bootstrap ?
Forms are used on almost every website that you visit. It is generally used to collect data from the users. It consists of various interactive controls that enable users to input the data. These controls are wrapped in the <form> tag and also can be designed or styled according to the need by
4 min read