Bootstrap 5Navigation

Bootstrap 5 Nav Pills

Bootstrap 5 Nav Pills are a navigation component that styles links as pill-shaped tab buttons, visually indicating the active section with a filled background. Unlike Nav Tabs, pills use a rounded capsule appearance and work well both horizontally and vertically. Use them when you want to switch between related content panels, filter a list, or provide secondary navigation within a page section.

Primary Class

.nav-pills

Common Use Cases

→Switching between account settings sections (Profile, Security, Notifications, Billing) within a dashboard without a full page reload
→Filtering a portfolio or product grid by category (All, Branding, Web Design, Print) using pill buttons tied to visible content blocks
→Tabbed pricing plan comparisons (Monthly vs Annual) where the active pill indicates the currently displayed pricing tier
→Vertical sidebar navigation inside a documentation or help centre layout, where each pill links to a different article section on the page

Variants & Classes

Variant	Description	Classes
Nav Pills Default	Standard nav pills with Bootstrap's default styling.	`nav-pills`
Nav Pills Responsive	Responsive variant that adapts to different screen sizes.	`nav-pills nav-pills-responsive`

Code Example

<ul class="nav nav-pills mb-4" id="settingsTabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="profile-tab" data-bs-toggle="pill" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="true">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="security-tab" data-bs-toggle="pill" data-bs-target="#security" type="button" role="tab" aria-controls="security" aria-selected="false">Security</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="billing-tab" data-bs-toggle="pill" data-bs-target="#billing" type="button" role="tab" aria-controls="billing" aria-selected="false">Billing</button>
  </li>
</ul>

<div class="tab-content" id="settingsTabContent">
  <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <h5>Profile Settings</h5>
    <p>Update your display name, avatar, and public bio.</p>
  </div>
  <div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">
    <h5>Security Settings</h5>
    <p>Manage your password and two-factor authentication.</p>
  </div>
  <div class="tab-pane fade" id="billing" role="tabpanel" aria-labelledby="billing-tab">
    <h5>Billing &amp; Payments</h5>
    <p>View invoices and update your payment method.</p>
  </div>
</div>

Live Examples

Basic Nav Pills

Example 1

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 pills with custom colours
✓Nav Pills with interactive states
✓Responsive nav pills for all screen sizes

Best Practices

Use flex-column for vertical pill navigation

Add the class `flex-column` to your `nav nav-pills` element to stack pills vertically — ideal for sidebars. Pair it with `col-3` or similar grid columns to sit alongside your tab content panel.

Fill available width with nav-fill or nav-justified

`nav-fill` makes each pill take proportional width based on its label length, while `nav-justified` forces all pills to equal width — use `nav-justified` when you have 3–5 pills of similar label length for a cleaner, balanced look.

Override the active pill colour with a CSS variable

Bootstrap 5 pills use `--bs-nav-pills-link-active-bg` to control the active background colour. Set this variable in your root or a scoped selector to match your brand without overriding the full button stylesheet.

Pair with tab-pane fade for smooth transitions

Always add both `fade` and `show active` to the initially visible `.tab-pane` element. Without `show`, the active panel stays invisible on first render even though it is technically selected.

FAQ

What is the difference between Nav Pills and Nav Tabs in Bootstrap 5?

The visual difference is that Nav Tabs render an underline border style resembling browser tabs, while Nav Pills use a rounded filled-background capsule shape. Functionally they behave identically — both use `data-bs-toggle` and the `.tab-content` / `.tab-pane` pattern. Choose pills when your design calls for a button-like appearance, or when the navigation sits inside a card, sidebar, or toolbar rather than at the edge of a content area where the tab metaphor makes less visual sense.

How do I customise the active pill colour to match my brand?

The cleanest approach in Bootstrap 5 is to override the CSS custom property: `.nav-pills { --bs-nav-pills-link-active-bg: #your-colour; }`. If you also need to change the active text colour, add `--bs-nav-pills-link-active-color: #fff;` in the same block. Alternatively, you can override `.nav-pills .nav-link.active` directly in your stylesheet. Avoid editing Bootstrap source files directly unless you are compiling Sass, in which case set `$nav-pills-link-active-bg` and `$nav-pills-link-active-color` variables before importing Bootstrap.

How does Canvas Builder handle Nav Pills when generating a page?

When you describe a tabbed section or filtered content area in Canvas Builder, it generates fully wired Nav Pills markup — including the correct `data-bs-toggle`, `aria` attributes, and matching `tab-pane` IDs — ready to drop into your project. It applies your brand's primary colour to the active pill state automatically, and outputs a responsive structure so pills collapse or scroll gracefully on mobile without additional configuration.