Bootstrap Nav: Tabs and Pills
You will discover how to use the Bootstrap nav components to construct navigation in this article.
Bootstrap Nav Components
Bootstrap offers a convenient and efficient method to create various navigation elements, including tabs and pills, which are highly versatile and visually appealing. All of Bootstrap's nav components, such as tabs and pills, share the same foundational markup and styles provided by the base .nav class.
Creating Basic Nav with Bootstrap
To create a basic navigation menu, you can use the Bootstrap .nav class as shown below:
<div class="m-4">
<nav class="nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Text</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>
</div>
Note: If you wish to make a link appear disabled, you can use the class .disabled. However, it's important to note that the .disabled class only alters the visual appearance of the link, making it gray and removing the hover effect, while the link remains clickable unless you remove the href attribute.
Alignment of Nav Items
By default, navs are left-aligned, but you have the flexibility to align them to the center or right using flexbox utilities.
The following example utilizes the class .justify-content-center to center-align the nav items:
<div class="m-4">
<nav class="nav justify-content-center">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Picture</a>
<a href="#" class="nav-item nav-link">Text</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>
</div>
Similarly, you can right-align the nav items by using the class .justify-content-end ,as depicted below:
<div class="m-4">
<nav class="nav justify-content-end">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Picture</a>
<a href="#" class="nav-item nav-link">Text</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Report</a>
</nav>
</div>
Additionally, you can stack the nav items vertically by modifying the flex item direction with the class .flex-column. If you only want to stack the nav items vertically on smaller viewports but not on larger ones, you can use the class .flex-sm-column with a responsive breakpoint.
<div class="m-4">
<nav class="nav flex-column">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Picture</a>
<a href="#" class="nav-item nav-link">Text</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Report</a>
</nav>
</div>
Creating the Basic Tabs
For creating a tabbed navigation, you can simply add the class .nav-tabs to the basic nav, as illustrated below:
<div class="m-4">
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Picture</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Text</a>
</nav>
</div>
To create dynamic tabs that toggle between content, you can refer to the tutorial on Bootstrap tabs.
Adding icons to tab items can enhance their attractiveness, as demonstrated below:
<div class="m-4">
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active">
<i class="bi-house-door"></i> Home
</a>
<a href="#" class="nav-item nav-link">
<i class="bi-person"></i> Profile
</a>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">
<i class="bi-bar-chart"></i> Report
</a>
</nav>
</div>
To learn more about using icons in Bootstrap, you can explore the tutorial on Bootstrap icons and check out the provided list of Bootstrap icons classes.
Creating the Pills Nav
Similarly, you can create a pill-based navigation by adding the class .nav-pills to the basic nav, as shown in the following example:
<div class="m-4">
<nav class="nav nav-pills">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Picture</a>
<a href="#" class="nav-item nav-link">Text</a>
</nav>
</div>
You can also incorporate icons into your pills nav to further enhance its visual appeal:
<div class="m-4">
<nav class="nav nav-pills">
<a href="#" class="nav-item nav-link active">
<i class="bi-house-door"></i> Home
</a>
<a href="#" class="nav-item nav-link">
<i class="bi-person"></i> Profile
</a>
<a href="#" class="nav-item nav-link">
<i class="bi-envelope"></i> Messages
</a>
</nav>
</div>
Moreover, by applying the class .flex-column on the .nav element, you can arrange the pills nav in a vertically stacked manner. Alternatively, if you need to stack them on specific viewports but not on others, you can use responsive versions like .flex-sm-column.
<div class="m-4">
<nav class="nav nav-pills flex-column">
<a href="#" class="nav-item nav-link active">
<i class="bi-house-door"></i> Home
</a>
<a href="#" class="nav-item nav-link">
<i class="bi-person"></i> Profile
</a>
<a href="#" class="nav-item nav-link">
<i class="bi-envelope"></i> Messages
</a>
</nav>
</div>
Bootstrap Nav with Dropdown Menus
To add dropdown menus to links inside tabs and pills nav, you can use the four required CSS classes: .dropdown, .dropdown-toggle, .dropdown-menu, and .dropdown-item. This allows you to create simple dropdown menus inside tabs and pills nav without the need for JavaScript code.
Creating Tabs with Dropdowns
An example of adding a simple dropdown menu to a tab:
<div class="m-4">
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Sent</a>
<a href="#" class="dropdown-item">Drafts</a>
</div>
</div>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>
</div>
Creating Pills with Dropdowns
An example of adding a simple dropdown menu to a pill nav:
<div class="m-4">
<nav class="nav nav-tabs">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Inbox</a>
<a href="#" class="dropdown-item">Sent</a>
<a href="#" class="dropdown-item">Drafts</a>
</div>
</div>
<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>
</nav>
</div>
Further details about dropdown menus will be covered in the Bootstrap dropdowns chapter.
Fill and Justify Nav Component
To make your .nav-items expand and proportionately fill all available width, you can utilize the class .nav-fill on the .nav element. The following example demonstrates how all horizontal space is occupied by the nav items, though each item doesn't have the same width.
<div class="m-4">
<nav class="nav nav-pills nav-fill">
<a href="#" class="nav-item nav-link">Home</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link active">Explore Products</a>
<a href="#" class="nav-item nav-link">Contact Us</a>
</nav>
</div>
Alternatively, you can use the class .nav-justified instead of .nav-fill if you prefer a nav that fills all horizontal space and ensures each nav item has the same width.
<div class="m-4">
<nav class="nav nav-pills nav-justified">
<a href="#" class="nav-item nav-link">Home</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link active">Explore Products</a>
<a href="#" class="nav-item nav-link">Contact Us</a>
</nav>
</div>
FAQ
What are Nav tabs and pills in Bootstrap?
Nav tabs and pills are navigation components provided by the Bootstrap framework to create horizontal or vertical navigation menus. They allow you to organize content into separate sections, making it easy for users to switch between different views or pages.
How do you create Nav tabs using Bootstrap?
To create Nav tabs using Bootstrap, you use the .nav class along with the .nav-tabs class. Here's an example:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#messages">Messages</a>
</li>
</ul>
In this example, each <a> element with the .nav-link class represents a tab item. The active class is used to indicate the currently active tab.
What are Nav pills in Bootstrap? How do they differ from Nav tabs?
Nav pills in Bootstrap are similar to Nav tabs but appear as rounded buttons. They are created using the .nav-pills class. While Nav tabs have a more tab-like appearance, Nav pills look more like buttons. Here's an example:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#messages">Messages</a>
</li>
</ul>
How can you control the content displayed for each Nav tab or pill?
To control the content displayed for each Nav tab or pill, you need to use the corresponding id of the content section and set it as the href attribute in the <a> tag. Here's an example:
How can you create vertical Nav tabs using Bootstrap?
To create vertical Nav tabs using Bootstrap, you need to add the .flex-column class along with the .nav and .nav-tabs classes. This will style the tabs in a vertical arrangement. Here's an example:
<div class="nav flex-column nav-tabs" id="myTabs">
<a class="nav-link active" href="#home">Home</a>
<a class="nav-link" href="#profile">Profile</a>
<a class="nav-link" href="#messages">Messages</a>
</div>
How can you add icons to Nav tabs or pills in Bootstrap?
You can add icons to Nav tabs or pills by combining the Bootstrap Nav components with icons from a separate icon library like Font Awesome. Here's an example using Font Awesome icons:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#home">
<i class="fas fa-home"></i> Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile">
<i class="fas fa-user"></i> Profile
</a>
</li>
</ul>
How can you make a Nav pill stack on smaller screens?
To make a Nav pill stack on smaller screens (responsive behavior), you can utilize the responsive utility classes provided by Bootstrap. Use the .flex-column class along with the .nav and .nav-pills classes for stacking. Here's an example:
<ul class="nav flex-column nav-pills" id="myPills">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
</ul>
Can you customize the appearance of Nav tabs or pills?
Yes, you can customize the appearance of Nav tabs and pills by using your own CSS styles or by leveraging Bootstrap's utility classes. You can change the colors, fonts, spacing, and more. For example, you can use classes like .bg-primary, .text-success, and .rounded to apply custom styles.
How do you handle events when a Nav tab or pill is clicked?
You can use JavaScript to handle events when a Nav tab or pill is clicked. Here's an example using jQuery:
$('#myTabs a').on('click', function (e) {
e.preventDefault();
// Your event handling code here
});
This code binds a click event to the Nav tab or pill links inside an element with the ID myTabs. You can then perform actions or update content based on the clicked tab or pill.
How can you make a Nav tab or pill disabled?
To make a Nav tab or pill appear disabled, you can add the .disabled class to the respective <a> element. This will visually indicate that the tab or pill is not clickable. Here's an example:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#profile">Profile (Disabled)</a>
</li>
</ul>
Can you create a tab or pill that opens in a new window or tab?
Yes, you can create a tab or pill that opens in a new window or tab by adding the target="_blank" attribute to the <a> tag. Here's an example:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="https://example.com" target="_blank">External Link</a>
</li>
</ul>
Keep in mind that this will open the linked page in a new browser window or tab.
How can you set a default active tab or pill?
You can set a default active tab or pill by using the active class on the desired <a> element. This will make that tab or pill active when the page loads. Here's an example:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
</ul>
In this example, the "Home" tab is set as the default active tab.
Can you use Nav tabs and pills in a navigation bar?
Yes, you can use Nav tabs and pills within a navigation bar to create a navigation menu. You would usually place the tabs or pills within a <ul> element and apply the necessary classes for styling. Here's a basic example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile">Profile</a>
</li>
</ul>
</nav>
Are Nav tabs and pills responsive by default?
Yes, Nav tabs and pills are responsive by default, meaning they adjust their layout to fit smaller screens. However, for vertical Nav tabs or pills, you might need to use responsive utility classes like .flex-column to ensure proper stacking on smaller screens.
How can you add fade transitions when switching between Nav tabs or pills?
To add fade transitions when switching between Nav tabs or pills, you can combine the fade class with the show class on the associated tab content. Here's an example:
<div class="tab-content">
<div class="tab-pane fade show active" id="home">Home tab content</div>
<div class="tab-pane fade" id="profile">Profile tab content</div>
<div class="tab-pane fade" id="messages">Messages tab content</div>
</div>
This will create a fade effect when switching between tabs.
How can you create justified Nav tabs or pills?
To create justified Nav tabs or pills where each tab occupies equal width, use the .nav-justified class. Keep in mind that this class is only applicable to horizontal Nav tabs or pills:
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#home">Home</a>
</li>
</ul>
How can you dynamically load content using Ajax with Nav tabs or pills?
To dynamically load content using Ajax with Nav tabs or pills, you can attach a JavaScript event handler to the tab or pill click event. When a tab is clicked, you can make an Ajax request to fetch the content and then update the tab content container with the response. Here's a basic example using jQuery:
<ul class="nav nav-tabs" id="myTabs">
<li class="nav-item">
<a class="nav-link" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2">Tab 2</a>
</li>
</ul>
<div class="tab-content" id="tabContent">
<!-- Tab content will be loaded here -->
</div>
<script>
$('#myTabs a').on('click', function (e) {
e.preventDefault();
var targetUrl = $(this).attr('href');
$.ajax({
url: targetUrl,
success: function (response) {
$('#tabContent').html(response);
}
});
});
</script>
In this example, clicking a tab will trigger an Ajax request to load the content from the specified URL and then populate the tab content container.
How can you create scrollable Nav tabs or pills when there are many items?
If you have many tab items and want to prevent them from overflowing the available space, you can create scrollable Nav tabs or pills using CSS. You would set a fixed height for the tab container and apply the overflow-x: scroll CSS property to enable horizontal scrolling. Here's an example:
.nav-scrollable {
max-height: 200px; /* Adjust as needed */
overflow-x: scroll;
}
<ul class="nav nav-tabs nav-scrollable">
<!-- Tab items go here -->
</ul>
How can you add custom animations to Nav tabs or pills?
To add custom animations to Nav tabs or pills, you can use CSS transitions or animations. For instance, you can apply transition properties to the tab or pill's styles to control how they animate when selected or deselected. Be mindful of cross-browser compatibility and ensure that your custom animations enhance the user experience.
Conclusion
Exploring the capabilities of Bootstrap Tab Navigation and Pill Navigation unveils powerful tools for crafting engaging and user-friendly interfaces. Bootstrap Tab Navigation introduces aesthetic tab styling, interactive tabbed content, and responsive designs, allowing seamless navigation transitions and extensive customization.
Similarly, Bootstrap Pill Navigation offers stylish buttons, responsive layouts, and dynamic user experiences. Both navigation components provide convenient navigation bars, custom tab designs, and options for scrollable interfaces. Beyond navigation, the toolkit streamlines the creation and design of menus, navigation links, and menu items, implementing a wide range of features for enhanced functionality.
The focus on navigation item alignment and nav component expansion showcases Bootstrap's commitment to precise positioning and flexible layout adjustments. These features, coupled with the toolkit's ability to fill available space, justify content, and expand navigation elements, position Bootstrap as an indispensable resource for crafting sophisticated and responsive web navigation experiences.
In essence, Bootstrap Tab Navigation and Pill Navigation provide a versatile toolkit for web developers seeking to create intuitive and visually appealing navigation experiences. With features like aesthetic styling, interactive content, and responsiveness, these components cater to diverse design preferences. The inclusion of customization options, scrollable interfaces, and activation mechanisms further enhances the user experience.