Navigation Bars

A navigation bar is a header section used for site navigation, typically positioned at the top of the webpage.

Basic Navbar

Bootstrap allows the navigation bar to expand or collapse automatically based on the screen size.

To create a standard navigation bar, use the .navbar class along with a responsive class like .navbar-expand-xxl, .navbar-expand-xl, .navbar-expand-lg, .navbar-expand-md, or .navbar-expand-sm which controls when the navbar switches to a vertical layout based on screen size.

To insert links in the navbar, use a <ul> or <div> with the navbar-nav class. Inside it, add <li> elements with the nav-item class, and place <a> tags with the nav-link class inside each.

Output:

Vertical Navbar

Remove the .navbar-expand-* class to make the navigation bar stay vertical on all screen sizes.

Output:

Centered Navbar

Use the .justify-content-center class to align the navigation bar content to the center.

Output 3:

Colored Navbar

Apply one of the .bg-* classes (like .bg-primary, .bg-success, .bg-warning, etc.) to change the navbar’s background color.

Use the .navbar-dark class to give navbar links a white text color, or .navbar-light to apply black text color.

Output 3:

Brand / Logo

The .navbar-brand class is used to emphasize your website’s brand name, logo, or project title within the navigation bar.

Output 3:

When an image is used with the .navbar-brand class, Bootstrap 5 automatically adjusts its size to align properly within the navbar.

Output 3:

Navbar Text

Use the .navbar-text class to vertically align non-link elements inside the navbar, ensuring they have the correct padding and text color.

Output 3:

Navbar With Dropdown

Navbars can also hold dropdown menus:

Output 3:

Navbar Forms and Buttons

You can also include forms inside the navigation bar:

Output 3:

Fixed Navigation Bar

You can fix the navigation bar to either the top or bottom of the page using specific utility classes.

A fixed navbar remains in place at the top or bottom of the screen, even when the user scrolls the page.

Use the .fixed-top class to keep the navigation bar pinned to the top of the page while scrolling.

Output 3:

Apply the .fixed-bottom class to keep the navbar anchored at the bottom of the page, even while scrolling.

Output 3:

Apply the .sticky-top class to make the navbar stick to the top of the page once it reaches that position while scrolling. This class isn't supported in Internet Explorer 11 or earlier, where it behaves like position: relative.

Output 3: