Bootstrap5 Navigation

If you want to create a simple horizontal navigation bar, you can<ul>add on the element.navclass, and on each<li>add on the item.nav-itemclass, and on each link add.nav-linkclass:

Example

<ul class="nav"> <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" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

Try it yourself »

Navigation Alignment

.justify-content-centerclass sets the navigation centered,.justify-content-endclass sets the navigation right-aligned.

Example

<!--Navigation centered--> <ul class="nav justify-content-center"> <!--Navigation right-aligned--> <ul class="nav justify-content-end"> </div>

Try it yourself »

Vertical Navigation

.flex-columnclass is used to create a vertical navigation:

Example

<ul class="nav flex-column">

Try it yourself »

Tabs

Use.nav-tabsclass can turn navigation into tabs. Then use the .active class to mark the selected item.

Example

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" 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" href="#">Disabled</a> </li> </ul>

Try it yourself »

Pills Navigation

.nav-pillsclass can set navigation items to pill shape.

Example

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" 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" href="#">Disabled</a> </li> </ul>

Try it yourself »

Equal-width Navigation

.nav-justifiedclass can set navigation items to be justified and equal-width.

Example

<ul class="nav nav-pills nav-justified">..</ul> <ul class="nav nav-tabs nav-justified">..</ul>

Try it yourself »

Pills Dropdown

Example

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

Try it yourself »

Tabs Dropdown

Example

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

Try it yourself »

Dynamic Tabs

If you want to set the tabs to be dynamically switchable, you can add on each linkdata-bs-toggle="tab"attribute..tab-paneclass, and for the tab content, the<div>tag uses.tab-contentclass.

If you want a fade-in effect, you can.tab-paneadd after .fadeclass:

Example

<!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

Try it yourself »

Dynamic Pills

For dynamic pills, just set the data-bs-toggle attribute in the code of the above example todata-bs-toggle="pill":

Example

<!-- Nav pills --> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

Try it yourself »
Other Extensions