Bootstrap navbar styles, explains exactly when each one fits, and includes the markup you need to implement them immediately.
Key Takeaways
- Bootstrap 5 ships with a flexible
navbarcomponent that supports dark/light schemes, collapse breakpoints, dropdowns, and offcanvas — without jQuery. - The right navbar pattern depends on content depth, device audience, and brand positioning — not personal preference.
- CSS custom properties (including Canvas’s
--cnvs-themecolor) let you retheme any navbar without touching component source files. - Sticky and transparent navbars require careful Core Web Vitals handling to avoid layout shift penalties.
- The Canvas HTML Template ships pre-built variants of all ten styles across its 50+ demos.
1. Standard Light Navbar
The default Bootstrap 5 navbar with navbar-light bg-white is still the safest choice for corporate, agency, and informational sites. It reads cleanly on all screens, requires zero JavaScript beyond the bundled collapse, and passes WCAG contrast ratios out of the box.
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<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="#navLight">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLight">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
2. Dark Solid Navbar
Swap to navbar-dark bg-dark for tech products, developer tools, and gaming sites where a dark UI signals sophistication. Pair it with a light body background to create strong visual separation between the header and content.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navDark">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navDark">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
</ul>
</div>
</div>
</nav>3. Transparent Overlay Navbar
Used extensively on landing pages and photography sites, the transparent navbar sits over a full-bleed hero image or video. Apply position-absolute w-100 and navbar-dark (since the background is typically a dark image). The navbar solidifies on scroll via a small scroll listener — Canvas implements this pattern natively using its functions.bundle.js without any bespoke JavaScript.
When not to use it: avoid transparent navbars on content-heavy pages with bright backgrounds, where text contrast fails immediately on page load.
<nav class="navbar navbar-expand-lg navbar-dark position-absolute w-100 top-0 start-0 z-3"
style="background: transparent;">
<div class="container">
<a class="navbar-brand text-white fw-bold" href="#">Brand</a>
<!-- toggler + collapse as usual -->
</div>
</nav>
4. Sticky-Top Navbar
Add sticky-top to keep the navbar in view as users scroll. This is the right call for documentation sites, long-form blog posts, and ecommerce category pages where navigation must remain accessible at any scroll depth. Be aware: sticky-top uses position: sticky, which can trigger layout shifts if combined with lazy-loaded content above the fold. For guidance on mitigating that, see our post on how to optimise Bootstrap 5 images for Core Web Vitals.
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>5. Centered Logo Navbar
Popular on fashion, hospitality, and lifestyle brands, the centered logo layout places the brand mark in the middle with navigation links split equally left and right. Bootstrap 5 flex utilities make this straightforward without custom CSS classes.
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container justify-content-between">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item"><a class="nav-link" href="#">Collections</a></li>
</ul>
<a class="navbar-brand mx-auto fw-bold" href="#">BRAND</a>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>6. Mega-Menu Navbar
Sites with deep content hierarchies — enterprise SaaS, large ecommerce stores, multi-service agencies — need a mega-menu navbar that exposes subcategories in a wide dropdown panel. Bootstrap 5’s dropdown component is the foundation; the panel itself uses Bootstrap’s grid inside the .dropdown-menu. If you are building a SaaS landing page, the Canvas SaaS demo section breakdown in our Canvas SaaS Landing Demo post shows how the mega-menu integrates with the hero and feature blocks.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Products</a>
<div class="dropdown-menu p-4" style="min-width: 600px;">
<div class="row g-3">
<div class="col-4">
<h6 class="dropdown-header">Category A</h6>
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
</div>
<div class="col-4">
<h6 class="dropdown-header">Category B</h6>
<a class="dropdown-item" href="#">Item 3</a>
<a class="dropdown-item" href="#">Item 4</a>
</div>
</div>
</div>
</li>7. Offcanvas Navbar
Bootstrap 5.2+ introduced native offcanvas support in the navbar component via data-bs-toggle="offcanvas". This is the superior mobile experience for sites with many nav links, replacing the cramped accordion collapse with a full-height slide-in panel. It also keeps the desktop navbar completely unaffected.
<nav class="navbar navbar-light bg-white">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="offcanvas offcanvas-end" id="offcanvasNav">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
</ul>
</div>
</div>8. Branded Colour Navbar
Apply your brand colour directly using Bootstrap’s bg-* utilities or a CSS custom property. Canvas uses --cnvs-themecolor as the single token that propagates across buttons, links, and navbar backgrounds — change one variable and the entire header recolours. This approach is covered in detail in our SCSS vs CSS variables theming guide.
<nav class="navbar navbar-dark navbar-expand-lg"
style="background-color: var(--cnvs-themecolor, #0d6efd);">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>9. Two-Row (Stacked) Navbar
Large ecommerce and news portals often separate utility navigation (account, search, currency) from primary navigation in a two-row header design. Bootstrap does not prescribe this pattern, but two stacked <nav> elements styled independently handle it cleanly. The top bar uses a condensed py-1 row; the main navbar sits below it.
<div class="bg-dark py-1">
<div class="container d-flex justify-content-end gap-3">
<a class="text-white-50 small text-decoration-none" href="#">Account</a>
<a class="text-white-50 small text-decoration-none" href="#">USD</a>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand fw-bold" href="#">Store</a>
</div>
</nav>10. Minimal Borderless Navbar
Portfolio sites, design studios, and personal brands benefit from a borderless, low-contrast navbar that steps back so the content takes focus. Remove shadows and borders entirely, use spaced-out letter-tracking on nav links, and keep the link count to four or fewer items.
<nav class="navbar navbar-expand-lg navbar-light"
style="background: transparent; border-bottom: none;">
<div class="container">
<a class="navbar-brand fw-semibold ls-3 text-uppercase small" href="#">Studio</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto gap-4">
<li class="nav-item"><a class="nav-link text-muted small" href="#">Work</a></li>
<li class="nav-item"><a class="nav-link text-muted small" href="#">About</a></li>
</ul>
</div>
</div>
</nav>Frequently Asked Questions
sticky-top uses CSS position: sticky, meaning the navbar scrolls with the page until it reaches the top of the viewport, then sticks. fixed-top uses position: fixed, removing the element from document flow entirely, which means you must add padding-top to the <body> to prevent content being hidden beneath it. For most sites, sticky-top is simpler and causes fewer layout issues.
Start with background: transparent and a navbar-dark class for contrast over a hero image. Add a scroll event listener in JavaScript that toggles a CSS class (e.g., .scrolled) which applies a solid background. Canvas’s functions.bundle.js includes this behaviour out of the box, triggered by a data- attribute on the nav element — no custom script required.
The most common choice is navbar-expand-lg, which collapses the menu below 992px. For sites with many nav links, navbar-expand-xl gives more room before collapse. For simple two-to-three link navbars on content sites, navbar-expand-md works well. The offcanvas pattern sidesteps this decision entirely since the menu is always off-screen on mobile regardless of breakpoint.
Yes. Bootstrap 5 exposes component-level CSS custom properties on the .navbar element. You can override --bs-navbar-color, --bs-navbar-hover-color, and --bs-navbar-active-color directly in a stylesheet or inline style without touching SCSS. Canvas extends this with its own --cnvs-themecolor token for brand-level control across all components simultaneously.
No. The mega-menu pattern relies entirely on Bootstrap’s built-in dropdown plugin, which ships in the standard bootstrap.bundle.min.js. The wide panel is achieved through CSS — specifically overriding min-width on .dropdown-menu and using Bootstrap’s grid inside it. No third-party library is needed in Bootstrap 5, unlike Bootstrap 3-era implementations.
Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.
If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.
Skip the setup — build it free
Spin up a complete Bootstrap 5 site, blog included, with Canvas Builder. No coding, no cost.
Canvas Team
Tutorials and tips for building beautiful Bootstrap 5 websites with the Canvas HTML Template and Canvas Builder.
More from the Canvas Blog