Bootstrap 5 Navbar Example

Q: How do I make a Bootstrap 5 navbar responsive?

Add navbar-expand-lg to the .navbar element. Bootstrap automatically collapses the nav into a hamburger menu on smaller screens using the .navbar-toggler button and .navbar-collapse div.

Q: What is the difference between sticky-top and fixed-top?

sticky-top keeps the navbar in document flow and sticks when scrolled past. fixed-top is always pinned at the top but removed from document flow — requiring padding-top: 56px on body to prevent content going underneath.

Q: Does Bootstrap 5 navbar require jQuery?

No. Bootstrap 5 dropped jQuery entirely. You only need bootstrap.bundle.min.js which includes Popper.js.

Q: How do I change the Bootstrap 5 navbar background color?

Use Bootstrap utilities like bg-dark, bg-primary, or a custom inline style. In Bootstrap 5.3+, use data-bs-theme='dark' instead of the old navbar-dark class.

Q: How do I center links in a Bootstrap 5 navbar?

Add mx-auto to the .navbar-nav element: . This uses Bootstrap's auto-margin flexbox utility to center the links.

The Bootstrap 5 navbar is the most-used component in any web project. This page covers 5 practical navbar patterns — from a simple responsive nav to sticky and dropdown menus — each with working HTML you can copy directly.

Quick Setup

Before using any example, add Bootstrap 5 to your <head>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Key Classes Reference

Class	What It Does
`.navbar`	Required wrapper
`.navbar-expand-lg`	Collapses on screens < 992px
`.navbar-brand`	Styles your logo or site name
`.navbar-toggler`	Hamburger button on mobile
`.sticky-top`	Sticks to top on scroll
`.fixed-top`	Always pinned, outside document flow
`data-bs-theme="dark"`	Dark mode (Bootstrap 5.3+)
`.me-auto`	Pushes items to the right

1. Basic Bootstrap 5 Navbar

The simplest responsive navbar with brand and nav links. Collapses to a hamburger menu on mobile automatically.

2. Dark Bootstrap 5 Navbar

Use data-bs-theme='dark' for Bootstrap 5.3+ dark navbars with automatic link color handling.

4. Navbar with Search Bar

Embed a search form inside the navbar using d-flex utility classes.

5. Sticky Navbar

Use sticky-top to keep the navbar visible on scroll without removing it from document flow.

Frequently Asked Questions

How do I make a Bootstrap 5 navbar responsive?▲

Add navbar-expand-lg to the .navbar element. Bootstrap automatically collapses the nav into a hamburger menu on smaller screens using the .navbar-toggler button and .navbar-collapse div.

What is the difference between sticky-top and fixed-top?▼

sticky-top keeps the navbar in document flow and sticks when scrolled past. fixed-top is always pinned at the top but removed from document flow — requiring padding-top: 56px on body to prevent content going underneath.

Does Bootstrap 5 navbar require jQuery?▼

No. Bootstrap 5 dropped jQuery entirely. You only need bootstrap.bundle.min.js which includes Popper.js.

How do I change the Bootstrap 5 navbar background color?▼

Use Bootstrap utilities like bg-dark, bg-primary, or a custom inline style. In Bootstrap 5.3+, use data-bs-theme='dark' instead of the old navbar-dark class.

How do I center links in a Bootstrap 5 navbar?▼

Add mx-auto to the .navbar-nav element: <ul class='navbar-nav mx-auto'>. This uses Bootstrap's auto-margin flexbox utility to center the links.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Bootstrap 5 Navbar Example

Quick Setup

Key Classes Reference

1. Basic Bootstrap 5 Navbar

2. Dark Bootstrap 5 Navbar

3. Navbar with Dropdown Menu

4. Navbar with Search Bar

5. Sticky Navbar

Frequently Asked Questions

Need a Full Bootstrap 5 Admin Dashboard?

Related Components

Bootstrap 5 Sidebar Navigation

Bootstrap 5 Hero Section

Angular Bootstrap Navbar