Google Ad Slot: content-top

Bootstrap 5 Navbar

~1 min read · Bootstrap

On this page

The navbar in Bootstrap 5 is a responsive and customizable navigation bar component that can be used for site headers, navigation menus, and branding. It adapts seamlessly across devices.

Basic Navbar:

A simple navbar with a brand name.

Example

Try it yourself

Navbar with Links:

Add navigation links using an unordered list (<ul>).

Example

Try it yourself

Navbar with Dropdown:

Integrate a dropdown menu in the navbar.

Example

Try it yourself

Dark and Light Themes:

You can use .navbar-light and .bg-light or .navbar-dark and .bg-dark.

Example

Try it yourself

Navbar with Form and Search:

Add a form with a search bar.

Example

Try it yourself

Sticky Navbar:

Make the navbar stick to the top of the viewport.

Example

Try it yourself

Fixed Navbar:

Fix the navbar at the top or bottom using .fixed-top or .fixed-bottom.

Example

Try it yourself

❮ Previous Next ❯

Formatter

Design

Editor

Generator

Converter

Tester

Search

Welcome Back

Create Account

Forgot Password

Bootstrap 5 Navbar

Basic Navbar:

Navbar with Links:

Navbar with Dropdown:

Dark and Light Themes:

Navbar with Form and Search:

Sticky Navbar:

Fixed Navbar:

Cookie Consent & Privacy Preferences