Utilizor
HomeBootstrap 5 BasicsBS5 Navs

BBS5 Navs

Learn how to create navigation menus.

BS5 Navs

Bootstrap 5 provides several ways to create navigation menus.

A basic nav is built with <ul class="nav"> and <li class="nav-item"> with <a class="nav-link">.

Aligned Navs

Use flex utilities like .justify-content-center or .justify-content-end to align the nav.

Vertical Nav

Use the .flex-column utility to create a vertical nav.

Tabs and Pills

Add .nav-tabs for tabs or .nav-pills for pill-shaped buttons.

Examples

Basic Nav

html/css

Standard horizontal navigation.

<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 disabled" href="#">Disabled</a>
  </li>
</ul>

Nav Tabs

html/css

Tabbed navigation.

<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>
</ul>

Nav Pills

html/css

Pill-style navigation.

<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>
</ul>

Test Your Knowledge

1. Which class creates tabbed navigation?

2. How do you align a nav to the center?