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.

Bootstrap 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 and classes

Variant	Description and classes	Classes
Light Navbar	White or light background with dark links.`navbar navbar-expand-lg navbar-light bg-light`	`navbar navbar-expand-lg navbar-light bg-light`
Dark Navbar	Dark background with light links.`navbar navbar-expand-lg navbar-dark bg-dark`	`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`	`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 navbar-expand-lg navbar-dark position-absolute w-100`
Navbar with Dropdown	Includes a multi-item dropdown menu.`navbar navbar-expand-lg + nav-item dropdown + dropdown-menu`	`navbar navbar-expand-lg + nav-item dropdown + dropdown-menu`

Code example

HTML

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

Live examples

Dark Navbar with Brand + Links

Dark navbar with brand, links and a CTA button. Expands from the md breakpoint and collapses into a working hamburger menu below it.

Example 1

Light Navbar with Search

Clean light navbar with a search input and user avatar dropdown placeholder.

Example 2

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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.