Tabs
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
Sectionalized Content!
Basic tabs
Toggle views
Welcome to the Home tab. Display dashboard summaries or key actions here.
Built on Bootstrap 5's .nav-tabs. M3 tabs use a primary accent under the active label.
Material Indicator!
HTML
<!-- Basic tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="tab-home" data-bs-toggle="tab" data-bs-target="#content-home" type="button" role="tab">
Home
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab-profile" data-bs-toggle="tab" data-bs-target="#content-profile" type="button" role="tab">
Profile
</button>
</li>
</ul>
<div class="tab-content border border-top-0 p-4 rounded-bottom" id="myTabContent">
<div class="tab-pane fade show active" id="content-home" role="tabpanel">
Home content here...
</div>
</div>Tabs with icons
Combining icons with labels improves scanability and visual interest.
Visual Cues!
HTML
<!-- Tabs with icons -->
<ul class="nav nav-tabs">
<li class="nav-item">
<button class="nav-link active d-flex align-items-center gap-2" data-bs-toggle="tab" type="button">
<i class="material-icons" style="font-size:18px;">home</i> Home
</button>
</li>
</ul>