Bootstrap5 Tutorial
BS5 Navs & Tabs
Previous Page
Next Page

Bootstrap 5 Navs & Tabs

Bootstrap 5 navs & tabs provide the simple and easy way to create horizontal and vertical nav & tab components.

Steps to Create Horizontal nav Component

  • Add .nav class to the (<ul>) or (<ol>) nav container.
  • Add .nav-item to the base class of the (<li>) element.
  • Add .nav-link to the base class of the (<a>) element.

General Syntax 

      <ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Nav Link</a>
  </li>
</ul>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Bootstrap Navs</h2>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Web Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Web Development</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Graphics Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">SEO</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

Navigation can also be created using <nav> element. Following are the steps to create Nav.

  • Add .nav to the nav container, i.e. (<nav>) element base class.
  • Add .nav-link to the (<a>) element base class.

General Syntax 

      <nav class="nav">
    <a class="nav-link"  href="#">Nav Link</a>
</nav>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Bootstrap Navs</h2>
  <nav class="nav">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
    <a class="nav-link" href="#">Link1</a>
    <a class="nav-link" href="#">Link2</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled Link3</a>
  </nav>
</div>
<!--/container-->
Try it now

Active/Disabled Navs & Tabs

Add .active to the <a> element's base class to make a nav item active, and to make a disabled navigation link, add .disabled to the <a> element's base class.

General Syntax 

      <ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled Link</a>
  </li>
</ul>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Active/Disabled Nav Link</h2>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Active Link1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled Link4</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

To make a disabled nav item, use .disabled to the <a> element's base class.

General Syntax 

      <ul class="nav">
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled Link </a>
  </li>
</ul>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Disabled Nav Link</h2>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Active Link1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled Link 4</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

Nav: Horizontal Alignment

By default navs is left-aligned, but it can be changed to the center or right using flexbox utility classes. 

Center Alignment

Add .justify-content-center to the nav container's base class to align the nav item to the horizontal center.

General Syntax 

      <ul class="nav justify-content-center"> </ul>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Horizontal Alignment Of Navs</h2>
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Services</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

Nav:Right Alignment

To align the nav item in the right direction of the web page, add .justify-content-end to the nav container base class. 

General Syntax 

      <ul class="nav justify-content-end"> </ul>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Nav:Right Alignment</h2>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">App design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Web design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Graphics Design</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

Vertical Nav

Steps to create vertical nav system.

  • Add .nav, and .flex-column to the base class of the <ul> element.
  • Assign .nav-item to the <li> element's base class.
  • Add .nav-link to the <a> element's base class.

General Syntax 

      <ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Link 1</a>
  </li>
</ul>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Vertical Nav</h2>
  <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Link1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link3</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

Vertical Nav using <nav> Element

General Syntax 

      <nav class="nav flex-column"> </nav>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Vertical Nav</h2>
  <nav class="nav flex-column">
    <a class="nav-link active" aria-current="page" href="#">Link1</a>
    <a class="nav-link" href="#">Link2</a>
    <a class="nav-link" href="#">Link3</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link4</a>
  </nav>
</div>
<!--/container-->
Try it now

Tabs

Steps to create tab menus:

  • Step1:Add .nav and .nav-tabs to the <ul> element base class.
  • Step2: Add .nav-item to the <li> element base class.
  • Step3:Add .nav-link to the <a> element base class.

General Syntax 

      <ul class="nav nav-tabs">
<li class="nav-item">
 <a class="nav-link active"  href="#">Active</a>
</li>
</ul>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Bootstrap Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Web Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">App Design </a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Graphics Design</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

Pills

Steps to create pills:

  • Step1:Add .nav, and .nav-pills to the base class of the <ul> element.
  • Step2: Add .nav-item to the base class of the <li> element.
  • Step3: Add .nav-link class to the base class of <a> element.

General Syntax 

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

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Bootstrap Pills</h2>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Web Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Graphics Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">App Design</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

Step To Create Vertical Pills

  • Step1:Add .nav,.nav-pills & .flex-column to the <ul> element base class.
  • Step2: Add .nav-item to the <li> element base class.
  • Step3:Add .nav-link to the <a> element base class.

General Syntax 

      <ul class="nav nav-pills flex-column">
 <li class="nav-item">
  <a class="nav-link active" href="#">Link</a>
 </li>
 </ul>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">Bootstrap Vertical Pills</h2>
  <ul class="nav nav-pills flex-column">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Web Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Graphics Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">App Design</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

Alignment Of Nav/Pill Menu

Full Width Nav Alignment

To extend the navigation nav into the whole available width, use .nav-fill class to <ul> having class either .nav .nav-pills or .nav .nav-tabs. Please keep in mind that every nav item will not be the same width.

General Syntax 

      <ul class="nav nav-pills nav-fill">
    <li class="nav-item">
      <a class="nav-link active" href="#">Nav Link</a>
    </li>
  </ul>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Assigning Equal Width To Nav Menu</h2>
  <ul class="nav nav-pills nav-fill">
    <li class="nav-item">
      <a class="nav-link active" href="#">App Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Graphics Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">SEO</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

Full Width Tab Alignment

General Syntax 

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

Source Code 

          <div class="container">
  <h2 class="text-center">Full Width Tab Alignment</h2>
  <ul class="nav nav-tabs nav-fill">
    <li class="nav-item">
      <a class="nav-link active" href="#">Web Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Graphics Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">App Design</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

Assigning Equal Width To Nav/Pill Menu

To align equal width of nav/pill menu item, use .nav-justified to <ul> element having either .nav .nav-pills or .nav .nav-tabs class.

General Syntax 

      <ul class="nav nav-pills nav-justified"></ul>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Assigning Equal Width To Nav/Pill Menu</h2>
  <ul class="nav nav-pills nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Web Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Graphics Design</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">App Design</a>
    </li>
  </ul>
</div>
<!--/container-->
Try it now

Creating Nav Based Navigation

  • Step1:Add .nav & .nav-tabs to <nav> element base class.
  • Step2: Add .nav-item & .nav-link to <a> element base class.

General Syntax 

      <nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link ">Link</a>
</nav>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Creating Nav Based Navigation</h2>
  <nav class="nav nav-tabs">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">About</a>
    <a href="#" class="nav-item nav-link">Services</a>
    <a href="#" class="nav-item nav-link disabled" tabindex="-1">Contact</a>
  </nav>
</div>
<!--/container-->
Try it now

Creating Pill Based Navigation

  • Step1:Add .nav & .nav-pills to the <nav> element base class.
  • Step2: Add .nav-item & .nav-link to the <a> element base class.

General Syntax 

      <nav class="nav nav-pills">
   <a href="#" class="nav-item nav-link">Link</a>
  </nav>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">Creating Pill Based Navigation</h2>
  <nav class="nav nav-pills">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">About</a>
    <a href="#" class="nav-item nav-link">Contact</a>
  </nav>
</div>
<!--/container-->
Try it now

Bootstrap Tabs With Dropdown

Bootstrap tabs/pills menus and dropdown concept are used to make dropdown tabs/pills menu.

General Syntax 

      <ul class="nav nav-tabs">
 <li class="nav-item">
  <a class="nav-link active" aria-current="page" href="#">Home</a>
 </li>
 <li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Services</a>
  <ul class="dropdown-menu">
   <li><a class="dropdown-item" href="#">Service 1</a></li>
  </ul>
 </li>
</ul>
Try it now

Source Code 

          <div class="container mt-5">
 <h2 class="text-center">Bootstrap Tabs With Dropdown</h2>
 <ul class="nav nav-tabs">
  <li class="nav-item">
   <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Services</a>
   <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Services1</a></li>
    <li><a class="dropdown-item" href="#">Services2</a></li>
    <li><a class="dropdown-item" href="#">Services3</a></li>
   </ul>
  </li>
 </ul>
</div>
<!--/container-->
Try it now

Bootstrap Pills With Dropdown

General Syntax 

      <ul class="nav nav-pills">
 <li class="nav-item">
   <a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Services</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Services1</a></li>
   </ul>
 </li>
</ul>
Try it now

Source Code 

          <div class="container">
 <h2 class="text-center">Bootstrap Pills With Dropdown</h2>
 <ul class="nav nav-pills">
  <li class="nav-item">
   <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Services</a>
   <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Services1</a></li>
    <li><a class="dropdown-item" href="#">Services2</a></li>
    <li><a class="dropdown-item" href="#">Services3</a></li>
   </ul>
  </li>
 </ul>
</div>
<!--/container-->
Try it now

Online Test / Quiz

Question set 1

Web Tutorials

Bootstrap 5 Navs & Tabs
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Tutorials
HTML JAVASCRIPT CSS BOOTSTRAP 5
Performance Evalution
HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
Practical Approach
Coaching Software Computer Software Skill Management Software School Management Software