Bootstrap 5Navigation

Bootstrap 5 Navbar

The Bootstrap 5 navbar is a responsive navigation header component that automatically collapses into a hamburger menu on smaller screens. It supports branding, links, dropdowns, search forms, and custom content — all fully responsive.

Primary Class

.navbar

Common Use Cases

→Site-wide navigation header
→Sticky top navigation bars
→Dark or transparent hero navbars
→Multi-level dropdown menus
→Navbar with search input

Variants & Classes

Variant	Description	Classes
Light Navbar	White or light background with dark links.	`navbar navbar-expand-lg navbar-light bg-light`
Dark Navbar	Dark background with light links.	`navbar navbar-expand-lg navbar-dark bg-dark`
Sticky Navbar	Sticks to the top of the viewport on scroll.	`navbar navbar-expand-lg navbar-dark bg-dark sticky-top`
Transparent Navbar	No background — overlays hero images.	`navbar navbar-expand-lg navbar-dark position-absolute w-100`
Navbar with Dropdown	Includes a multi-item dropdown menu.	`navbar navbar-expand-lg + .dropdown inside .nav-item`

Code Example

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
  <div class="container">
    <a class="navbar-brand fw-bold" href="/">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMain">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMain">
      <ul class="navbar-nav ms-auto gap-1">
        <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
        <li class="nav-item">
          <a class="btn btn-sm btn-primary ms-2" href="/signup">Get Started</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Transparent overlay navbar with logo centred
✓Mega menu navbar with category columns
✓Minimal navbar with icon links
✓Navbar with announcement bar above
✓Full-width dark navbar with CTA button

Best Practices

Always use sticky-top for marketing pages

A sticky navbar keeps navigation accessible at all times. Use sticky-top rather than fixed-top to avoid the padding issues fixed positioning introduces.

Use navbar-expand-lg for most layouts

navbar-expand-lg collapses the menu on screens below 992px — the right breakpoint for most desktop navigation layouts.

Transparent navbars need careful contrast

A transparent navbar over a light hero image will have poor contrast. Use navbar-dark class only over dark/image backgrounds. Test on all hero image variants.

FAQ

How do I make a Bootstrap 5 navbar sticky?

Add the sticky-top class to your navbar element. This uses CSS position: sticky which keeps the navbar in flow (no padding needed) and sticks it to the top on scroll.

How do I add a dropdown to a Bootstrap 5 navbar?

Add the dropdown class to a nav-item, change the nav-link to use data-bs-toggle='dropdown', and add a sibling div.dropdown-menu with your dropdown items.

Can Canvas Builder generate navbar HTML?

Yes — Canvas Builder generates complete navbar HTML using Canvas's navbar variants. Specify 'sticky dark navbar with logo and CTA button' in your prompt to get the right variant.