Utilizor
HomeBootstrap 5 BasicsBS5 Navbar

BBS5 Navbar

Learn how to create a navigation bar.

BS5 Navbar

A navbar is a navigation header that is placed at the top of the page.

A standard navbar is created with .navbar, .navbar-expand-sm|md|lg|xl|xxl (for responsive collapsing), and a color scheme class.

Brand/Logo

The .navbar-brand class is used for your company, product, or project name.

Collapsible Navbar

To create a collapsible navbar, use a button with class="navbar-toggler", data-bs-toggle="collapse" and data-bs-target="#the-target". Then wrap the navbar content (links, etc) in a div with class .collapse navbar-collapse and the matching ID.

Color Schemes

Use .navbar-dark bg-dark for a dark navbar or .navbar-light bg-light for a light navbar.

Examples

Basic Navbar

html/css

A simple horizontal navbar.

<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</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>
    </ul>
  </div>
</nav>

Navbar with Brand

html/css

Navbar with a brand logo/text.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logos</a>
  </div>
</nav>

Collapsible Navbar

html/css

Responsive navbar that collapses on smaller screens.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Test Your Knowledge

1. Which class is required to make the navbar responsive?

2. Which class is used for the brand/logo in the navbar?