Bootstrap 5 Pills component
Responsive pills built with the latest Bootstrap 5. Pills or called chips are button-like navigation components which can allows users navigate to another pages or switch to another content on the same page.
Documentation and examples for pills how to usage and JavaScript plugin.
Basic pills
Use the nav-pills
to nav
element make its pills.
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" data-bs-toggle="pill" href="#">My templates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="pill">Featured</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="pill">Popular</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="pill">Design</a>
</li>
</ul>
See Radio toggle buttons section.
Tabs
Make the basic pills to generate a tabbed interface like Tabs using data-bs-toggle="pill"
.
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pill-tab-0" data-bs-toggle="pill" href="#pill-tabpanel-0" role="tab" aria-controls="pill-tabpanel-0" aria-selected="true">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pill-tab-1" data-bs-toggle="pill" href="#pill-tabpanel-1" role="tab" aria-controls="pill-tabpanel-1" aria-selected="false">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pill-tab-2" data-bs-toggle="pill" href="#pill-tabpanel-2" role="tab" aria-controls="pill-tabpanel-2" aria-selected="false">Tab 3</a>
</li>
</ul>
<div class="tab-content py-3 mt-2">
<div class="tab-pane active" id="pill-tabpanel-0" role="tabpanel" aria-labelledby="pill-tab-0">Tab 1 content</div>
<div class="tab-pane" id="pill-tabpanel-1" role="tabpanel" aria-labelledby="pill-tab-1">Tab 2 content</div>
<div class="tab-pane" id="pill-tabpanel-2" role="tabpanel" aria-labelledby="pill-tab-2">Tab 3 content</div>
</div>
Vertical
Stack your navigation by changing the flex item direction with the .flex-column
utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column
).
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
</div>
<div class="tab-content mt-2" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">Home content</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">Profile content</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">Message content</div>
</div>
</div>
Fill and justify
Force your .nav
’s contents to extend the full available width one of two modifier classes.
Filling width
To proportionately fill all available space with your .nav-item
s, use .nav-fill
. Notice that all horizontal space is occupied, but not every nav item has the same width.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" id="fill-tab-0" data-bs-toggle="pill" href="#fill-tabpanel-0" role="tab" aria-controls="fill-tabpanel-0" aria-selected="true">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" id="fill-tab-0" data-bs-toggle="pill" href="#fill-tabpanel-1" role="tab" aria-controls="fill-tabpanel-1" aria-selected="true">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" id="fill-tab-0" data-bs-toggle="pill" href="#fill-tabpanel-2" role="tab" aria-controls="fill-tabpanel-2" aria-selected="true">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<div class="tab-content mt-3" id="tab-content">
<div class="tab-pane active" id="fill-tabpanel-0" role="tabpanel" aria-labelledby="fill-tab-0">Item One</div>
<div class="tab-pane" id="fill-tabpanel-1" role="tabpanel" aria-labelledby="fill-tab-1">Item Two</div>
<div class="tab-pane" id="fill-tabpanel-2" role="tabpanel" aria-labelledby="fill-tab-2">Item Three</div>
</div>
When using a <nav>
-based navigation, you can safely omit .nav-item
as only .nav-link
is required for styling elements.
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Justified
For equal-width elements, use .nav-justified
. All horizontal space will be occupied by nav links, but unlike the .nav-fill
above, every nav item will be the same width.
<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" href="#">Much longer 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">Disabled</a>
</li>
</ul>
Pills with dropdowns
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" 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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
Icons pills
Add an icon to the pills element.
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#"><i class="fas fa-chart-pie"></i> Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-chart-line"></i> Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
Accessibility
If you’re using navs to provide a navigation bar, be sure to add a role="navigation"
to the most logical parent container of the <ul>
, or wrap a <nav>
element around the whole navigation. Do not add the role to the <ul>
itself, as this would prevent it from being announced as an actual list by assistive technologies.
Note that navigation bars, even if visually styled as pills with the .nav-pills
class, should not be given role="tablist"``, role="tab"
or role="tabpanel"
attributes. These are only appropriate for dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices. The aria-current
attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding aria-selected="true"
on the active tab.