Bootstrap 5 Navs

Add navigation tabs and pills easily with Bootstrap's .nav class.

Bootstrap's .nav class (and associated classes) lets you turn a list into tabs and navigation "pills".

To add a tab or nav pill, add the .nav class and either .nav-pills or .nav-tabs to a <ul> element containing the list of navigation items.

However, using a <ul> is not a requirement — you can just as easily use navs on their own.

Base Nav

Bootstrap 5 provides a base style that you can use with nav items. You can either add further Bootstrap styles to this base or customize it according to your own needs.

The base nav component uses the .nav class on the outer navigation element such as a <ul> or <nav> element.

On <ul> Elements

On <nav> Elements

Vertical Navs

Add the .flex-column utility class to the .nav element to stack the nav items vertically.


Add class="nav nav-tabs" to the <ul> element containing the list of navigation items.

Also use class="active" to make a tab the selected tab.


Change nav-tabs to nav-pills to display pills instead.

Vertical Pills

As with any nav, you can stack pills vertically by adding the .flex-column utility class to the class list.

Horizontal Alignment

By default, navs are left-aligned, but you can use alignment utilities to align them. For example, you can use .justify-content-center to center the nav.

Disabled Links

You can add Bootstrap's .disabled class to make a tab or pill appear to be disabled.

Tabs with Dropdown Menus

You can add a dropdown menu to a tab or pill. In this case, the .dropdown class is applied to a <li> element (not a <div> element).



Tabbable Panes

You can even use Bootstrap to create tabbable panels of content.

To do this, ensure each <a> in the navigation has data-bs-toggle="tab" or data-bs-toggle="pill" (depending on whether you're using tabs or pills). Then, beneath the tab list, add a <div> with the .tab-content class. This will contain the content. Then, for each piece of content, nest another <div> with the .tab-pane class.

Also, you can make tabs fade in by adding the .fade class to each .tab-pane. The first tab pane (or the active tab pane) must also have the .show class to properly fade in initial content.