Pills
Button-like navigation component.
Basic example
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>Rounded pills
<!-- Pills navigation -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link rounded active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link rounded" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link rounded" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link rounded disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>Fill and justify
<!-- Pills: Fill -->
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- Pills: Justified -->
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>Pills with dropdowns
<!-- Pills with dropdowns -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>Vertical pills
<!-- Vertical plills -->
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>Tabs-like behavior
This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other
.nav-powered navigation.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other
.nav-powered navigation.
This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other
.nav-powered navigation.
<!-- Nav pills -->
<ul class="nav nav-pills mb-3" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">
<i class="fi-home me-2 ms-n1"></i>
Home
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
<i class="fi-user me-2 ms-n1"></i>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-messages-tab" data-bs-toggle="pill" data-bs-target="#pills-messages" type="button" role="tab" aria-controls="pills-messages" aria-selected="false">
<i class="fi-message-square me-2 ms-n1"></i>
Messages
</button>
</li>
</ul>
<!-- Pills content -->
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
This is some placeholder content the <strong>Home tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav-</code>powered navigation.
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
This is some placeholder content the <strong>Profile tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav-</code>powered navigation.
</div>
<div class="tab-pane fade" id="pills-messages" role="tabpanel" aria-labelledby="pills-messages-tab">
This is some placeholder content the <strong>Messages tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav-</code>powered navigation.
</div>
</div>