Home Bootstrap 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?

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>

BBS5 Navs

BS5 Navs

Aligned Navs

Vertical Nav

Tabs and Pills

Examples

Basic Nav

Nav Tabs

Nav Pills

Test Your Knowledge

1. Which class creates tabbed navigation?

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

Utilizor Digital Network Hub

Productivity Engines

Development Global Reach

Local Ranking Ecosystems

Enterprise Growth Knowledge

BBS5 Navs

BS5 Navs

Aligned Navs

Vertical Nav

Tabs and Pills

Examples

Basic Nav

Nav Tabs

Nav Pills

Test Your Knowledge

1. Which class creates tabbed navigation?

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