Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Navs & Tabs in Bootstrap 5
Navs & Tabs: Navigation components for toggling between different views or content sections.
Basic Nav Styles
Default Nav
Horizontal Center
Horizontal Right
Tab Styles
All Tab Styles
Tabs
Pills
<!-- Tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home">Home</button>
</li>
</ul>
<!-- Pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="pill" data-bs-target="#home">Home</button>
</li>
</ul>Tab Content with JavaScript
Working Tabs Example
Home Content
This is the home tab content. Welcome to our website!
Profile Content
This is your profile information.
Contact Content
Get in touch with us through this tab.
<!-- Tab Navigation -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane">
Home
</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane">
<!-- Content for home tab -->
</div>
<div class="tab-pane fade" id="profile-tab-pane">
<!-- Content for profile tab -->
</div>
</div>Vertical Tabs
Vertical Tab Content
Content for home tab in vertical layout.
Profile content
Messages content
Fill and Justify Options
Nav Layout Options
Fill
nav-fillJustified
nav-justifiedTab with Dropdown
Accessibility Considerations
Accessibility Best Practices
- Use proper ARIA attributes (
role=&qout;tablist&qout;,role=&qout;tab&qout;) - Add
aria-controlsandaria-selected - Ensure keyboard navigation (arrow keys, tab key)
- Add focus styles for keyboard users
- Use semantic HTML structure
- Test with screen readers
