Bootstrap Navbars

Introduction

In this tour you’ll build a practical mental model for Bootstrap navbars: the main navbar, toggler/collapse wiring, and the key Properties to control layout and behavior.

Navbar Container

Navbars combine branding, navigation, and responsive behavior (collapse/expand). They’re built from a few nested parts that each have their own responsibilities.

tip: Most global navbar styling is on the

element (navbar-, bg-).

Screenshot: Navbar ContainerClick to open the larger image

Navbar theming

Navbar theme styling is controlled from the selected navbar in Properties and maps to Bootstrap’s data-bs-theme behavior when exposed. Select the navbar and review the available theming and styling options on the component.

tip: Most global navbar styling is on the

element itself, together with related navbar and background classes.

Screenshot: Navbar themingClick to open the larger image

Navbar expansion behavior

Use the selected navbar in Properties to review how it expands and collapses across breakpoints. This is where you confirm the responsive expansion behavior for the main navigation.

tip: If collapse behavior is wrong, inspect the toggler button together with the collapse container IDs and targets.

Screenshot: Navbar expansion behaviorClick to open the larger image

Navbar positioning

Review the selected navbar in Properties to control how it behaves in the page flow, including standard, fixed, and sticky positioning options.

Screenshot: Navbar positioningClick to open the larger image

Navbar ID

Use the selected navbar in Properties to confirm or assign a stable ID when you need reliable targeting for scripts, testing, or linked behaviors.

Screenshot: Navbar IDClick to open the larger image

Navbar: Child structure

The typical structure is: brand + toggler + collapse + nav list. Configure each part in Properties to get the behavior you want.

Screenshot: Navbar: Child structureClick to open the larger image

Brand Link

The brand link is the logo/title area and is often the primary route back to home.

tip: Brand is usually a normal link; focus on href, text, and optional image/icon.

Screenshot: Brand LinkClick to open the larger image

Brand: Link

Use Link (navbarBrandHref) to set the destination for the brand.

Screenshot: Brand: LinkClick to open the larger image

Brand: Target

Use Target (navbarBrandTarget) when you want to open the link in a new tab/window.

Screenshot: Brand: TargetClick to open the larger image

Toggler Button

The toggler controls the collapse behavior at smaller widths.

important: The toggler must point to the collapse element via data-bs-target / aria-controls.

Screenshot: Toggler ButtonClick to open the larger image

Toggler: Action Toggle

Use Action Toggle (btnDataTooggle) to ensure the button is configured for Collapse.

Screenshot: Toggler: Action ToggleClick to open the larger image

Toggler: Collapse Target

Use Collapse (btnToggleTargetCollapse) to point the button at the correct collapse container.

Screenshot: Toggler: Collapse TargetClick to open the larger image

Collapse Container

The collapse container holds the navigation items that are shown/hidden at smaller widths. Its ID must match the toggler’s collapse target.

important: Collapse ID (theId) and toggler target (btnToggleTargetCollapse) must match.

Screenshot: Collapse ContainerClick to open the larger image

Collapse: ID

Use ID (theId) to set the collapse element identifier.

Screenshot: Collapse: IDClick to open the larger image

Nav Item

Nav items represent the destinations in your navbar. This is typically where you control active state and link destination.

tip: Apply spacing/alignment at the list/container level so all items stay consistent.

Screenshot: Nav ItemClick to open the larger image

Wrap-up

Navbars work best when each part has a clear role: a brand link, a toggler, a collapse container, and a nav list. Use responsive settings and alignment utilities to match your layout.

Common navbar checklist

If the navbar doesn’t behave as expected, check:

• The toggler points to the correct collapse id
• The collapse has the matching id
• Your expand class matches your intent (navbar-expand-lg, etc.)
• Alignment utilities are applied on the nav list or collapse container

Toggler ↔ Collapse wiring

The toggler must point to the collapse container id, and the collapse must have the matching id.

Layout utilities go on the right node

Apply alignment utilities on the nav list or collapse container (not randomly on nested links).

Next steps

Continue with a related tour or go back to the Bootstrap tours index.