Bootstrap 5 Navs & Tabs

Bootstrap 5 provides flexible Nav components that allow you to create tabs, pills, and vertical menus for navigation. These nav elements are used to organize content horizontally or vertically.

Basic Nav

If you want to create a simple horizontal menu, use .nav,.nav-item and .nav-link class.

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

Horizontal Aligned Nav

Bootstrap 5 allows you to align navigation items horizontally using Flexbox utility classes. Use .justify-content-center to center align and .justify-content-end to align end.

Example

<!-- Centered nav -->
<ul class="nav justify-content-center">

<!-- Right-aligned nav -->
<ul class="nav justify-content-end">

Try it Yourself

Vertical Nav

To make a nav vertical, simply add flex-column to the .nav class.

Example

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

Try it Yourself

Nav Tabs

Tabs allow users to switch between different sections of content dynamically. To create basic tabs, use .nav-tabs. Use .active class to the active/current link.

Example

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Link</a>
  </li>
</ul>

Try it Yourself

Nav Pills

To create basic pills, use .nav-pills. Use .active class to the active/current link.

Example

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Link</a>
  </li>
</ul>

Try it Yourself

Fill and Justify

To create basic pills, use .nav-pills. Use .active class to the active/current link.

Example

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

Try it Yourself

Toggleable Tabs

To create toggleable tabs, use data-toggle="tab". Use .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content.

Example

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" 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>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu3">Menu 3</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div id="menu1" class="container tab-pane active">...</div>
  <div id="menu2" class="container tab-pane fade">...</div>
  <div id="menu3" class="container tab-pane fade">...</div>
</div>

Try it Yourself

Toggleable Pills

To create toggleable tabs, use data-toggle="pills". Use .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content.

Example

<!-- Nav pills -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" 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>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu3">Menu 3</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div id="menu1" class="container tab-pane active">...</div>
  <div id="menu2" class="container tab-pane fade">...</div>
  <div id="menu3" class="container tab-pane fade">...</div>
</div>

Try it Yourself