Bootstrap 5 Nav Tabs
Bootstrap 5 Nav Tabs transform a standard navigation list into a tabbed interface that shows and hides associated content panels without a page reload. They use the `.nav-tabs` modifier class alongside the Tab JavaScript plugin to manage active states and pane visibility. Use them when you need to present distinct but related content sections — such as product details, account settings, or technical documentation — within a single compact area.
Primary Class
.nav-tabsCommon Use Cases
- →Product pages that separate Description, Specifications, Reviews, and Shipping Info into distinct tabs to reduce scroll depth
- →SaaS dashboard settings pages where General, Billing, Notifications, and Security options each occupy a dedicated tab
- →API documentation pages that show request examples in multiple languages (cURL, Python, Node.js) via language-switcher tabs
- →Onboarding wizards that group form fields into logical steps — Account Details, Company Info, and Plan Selection — displayed as tabs rather than a multi-page flow
Variants & Classes
| Variant | Description |
|---|---|
| Nav Tabs Default | Standard nav tabs with Bootstrap's default styling. |
| Nav Tabs Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<ul class="nav nav-tabs" id="projectTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">Overview</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="timeline-tab" data-bs-toggle="tab" data-bs-target="#timeline" type="button" role="tab" aria-controls="timeline" aria-selected="false">Timeline</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="team-tab" data-bs-toggle="tab" data-bs-target="#team" type="button" role="tab" aria-controls="team" aria-selected="false">Team</button>
</li>
</ul>
<div class="tab-content" id="projectTabsContent">
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
<p class="pt-3">Project Alpha is a 6-month initiative to migrate the legacy billing system to a cloud-native architecture.</p>
</div>
<div class="tab-pane fade" id="timeline" role="tabpanel" aria-labelledby="timeline-tab">
<p class="pt-3">Phase 1 runs through Q1. Milestone reviews are scheduled for the end of each sprint.</p>
</div>
<div class="tab-pane fade" id="team" role="tabpanel" aria-labelledby="team-tab">
<p class="pt-3">Lead: Sarah Chen. Backend: 3 engineers. Design: 1 UX specialist. QA: 2 testers.</p>
</div>
</div>Live Examples
Basic Nav Tabs
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated nav tabs with custom colours
- ✓Nav Tabs with interactive states
- ✓Responsive nav tabs for all screen sizes
Best Practices
Always use `<button>` elements, not `<a>` tags, for tab triggers
Bootstrap 5 recommends `<button>` elements with `data-bs-toggle="tab"` for tab controls because they are natively focusable and don't require `href` attributes, which avoids URL hash side effects and keeps keyboard navigation clean without extra JavaScript.
Add `fade` to every `.tab-pane` for a consistent transition
Without the `.fade` class on each `.tab-pane`, content will snap into view instantly. Pairing `.fade` with `.show` on the active pane applies a 150ms opacity transition that makes content switches feel polished rather than jarring.
Make tabs responsive by switching to a dropdown on small screens
If you have five or more tabs, replace the tab list with a `.dropdown` on mobile viewports using a `d-sm-none` / `d-sm-flex` utility swap — this prevents horizontal overflow and the unsightly appearance of a scrollable tab strip on narrow screens.
Persist the active tab across page reloads using `localStorage`
Listen for Bootstrap's `shown.bs.tab` event, store the active tab's `data-bs-target` value in `localStorage`, then on page load call `bootstrap.Tab.getOrCreateInstance(triggerEl).show()` — this is essential for settings pages where users expect their last-visited tab to be remembered.