Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating a Tabbed pills and Vertical pills navigation menu in Bootstrap
Bootstrap provides several options for creating navigation menus, like tabbed and vertical pills. To create this kind of navigation menus in Bootstrap, we can use the built-in classes and components offered by the framework. This aids in creating a stylish and functional navigation menu that works well on all devices.
Approach - 1: Tabbed Pills Navigation
In this type of menus each tab represents a different section of the website. The pills are arranged horizontally. Whenever a tab is clicked, the corresponding section gets displayed.
Algorithm
Load the Bootstrap CSS and JavaScript files.
Add a container element with the heading "Tutorialspoint".
Create a navigation menu with 3 tabs.
Declare each tab.
Add some content for each tab.
Load the Bootstrap JavaScript and jQuery files.
Example
<!DOCTYPE html> <html> <head> <title>Tabbed Pill Navigation Menu Example</title> <!-- Add Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <!-- Container for the navigation menu and content --> <div class="container mt-4"> <!-- Page title --> <h1>Tutorialspoint</h1> <!-- Navigation menu with tabs as pills --> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <!-- Home tab --> <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <!-- Profile tab --> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <!-- Contact tab --> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <!-- Content for each tab --> <div class="tab-content" id="pills-tabContent"> <!-- Home tab content --> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <h1>Home</h1> <p>Lorem ipsum dolor sit amet.</p> </div> <!-- Profile tab content --> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <h1>Profile</h1> <p>Lorem ipsum dolor sit amet.</p> </div> <!-- Contact tab content --> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <h1>Contact</h1> <p>Lorem ipsum dolor sit amet.</p> </div> </div> </div> <!-- Add Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
Approach - 2: Vertical Pills Navigation
Vertical pills, on the other hand, are a type of navigation menu where the links are arranged vertically instead of horizontally. This aids in creating smooth UX.
Algorithm
Create a container with the heading "Tutorialspoint".
The container should have one row and two columns.
The first column contains the vertical nav menu, while the second column displays the content of the selected menu item.
The menus are created using the "nav" and "nav-pill" classes, which makes the menu items appear vertically in a pill-like style.
Each item is an anchor tag with a unique "href" that links to the "tab pane" which displays the corresponding content.
The content of each menu is displayed in a "tab pane" wrapped in a "tab content" class.
The JavaScript code includes the jQuery library and some Bootstrap JavaScript plugins to make the menu work.
Example
<!DOCTYPE html>
<html>
<head>
<title>Vertical Pill Navigation Menu</title>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Add jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Add Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Add Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
background-color: #f8f9fa;
}
/* Style for nav links */
.nav-pills .nav-link {
color: #fff;
background-color: #61a4f0;
border-radius: 0;
margin: 5px 0;
font-weight: bold;
padding: 10px;
border: none;
transition: all 0.2s ease-in-out;
}
/* Style for active and hover nav links */
.nav-pills .nav-link:hover,
.nav-pills .nav-link.active {
background-color: #007bff;
color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Remove focus outline from nav links */
.nav-pills .nav-link:focus {
box-shadow: none;
outline: none;
}
/* Style for tab content */
.tab-content {
background-color: #fff;
padding: 20px;
border-radius: 0 4px 4px 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container">
<h1>Tutorialspoint</h1>
<div class="row">
<div class="col-md-3">
<!-- Vertical navigation pills -->
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-md-9">
<!-- Tab content -->
<div class="tab-content" id="v-pills-tabContent">
<!-- Home tab -->
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<h3>Home</h3>
<p>Welcome to the home page!</p>
</div>
<!-- Profile tab -->
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<h3>Profile</h3>
<p>Lorem ipsum dolor.</p>
</div>
<!-- Messages tab -->
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<h3>Messages</h3>
<p>Lorem ipsum dolor.</p>
</div>
<!-- Settings tab -->
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<h3>Settings</h3>
<p>Lorem ipsum dolor.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Add Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Conclusion
These kinds of menus improve the user interface and user experience with the website.
Some of the alternate ways of implementation includes,
Using custom CSS and javascript function to create a customized menu.
Besides Bootstrap, the CSS frameworks like Materialize and Bulma provide similar functionalities.
We can also use some third-party libraries like jQuery UI, UIkit and Semantic UI to create this kind of nav menus.
449 Views
