Toggler ↔ Collapse wiring
The toggler must point to the collapse container id, and the collapse must have the matching id.
Bootstrap Navbars
Build a responsive Bootstrap navbar with brand, menus, toggler, collapse behavior, and alignment options.
Introduction
Section titled “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
Section titled “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
Orient yourself in Properties panel
Section titled “Orient yourself in Properties panel”Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Navbar: BS Theme and see how it fits into this area.
Navbar: BS Theme
Section titled “Navbar: BS Theme”In Properties, use BS Theme (bootstrap5Theme) to control light/dark theming via data-bs-theme.
tip: Most global navbar styling is on the
Navbar: Expand
Section titled “Navbar: Expand”Use Expand (navbarExpand) to control when the navbar collapses across responsive breakpoints. This step matters because Navbar: Expand is part of Selection Panels Properties Navbarexpand, and understanding that context makes the next action easier to repeat in your own project.
tip: If collapse behavior is wrong, inspect the toggler and the collapse container IDs/targets.
Navbar: Position
Section titled “Navbar: Position”Use Position (navbarPosition) for fixed-top, fixed-bottom, or sticky-top. This step matters because Navbar: Position is part of Selection Panels Properties Navbarposition, and understanding that context makes the next action easier to repeat in your own project.
Navbar: ID
Section titled “Navbar: ID”Use ID (theId) when you need stable targeting (testing, links, scripts). This step matters because Navbar: ID is part of Selection Panels Properties Theid, and understanding that context makes the next action easier to repeat in your own project.
Navbar: Child structure
Section titled “Navbar: Child structure”The typical structure is: brand + toggler + collapse + nav list. Configure each part in Properties to get the behavior you want.
Brand Link
Section titled “Brand Link”The brand link is the logo/title area and is often the primary route back to home. This step matters because Brand Link is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
tip: Brand is usually a normal link; focus on href, text, and optional image/icon.
Brand: Link
Section titled “Brand: Link”Use Link (navbarBrandHref) to set the destination for the brand. This step matters because Brand: Link is part of Selection Panels Properties Navbarbrandhref, and understanding that context makes the next action easier to repeat in your own project.
Brand: Target
Section titled “Brand: Target”Use Target (navbarBrandTarget) when you want to open the link in a new tab/window. This step matters because Brand: Target is part of Selection Panels Properties Navbarbrandtarget, and understanding that context makes the next action easier to repeat in your own project.
Toggler Button
Section titled “Toggler Button”The toggler controls the collapse behavior at smaller widths. This step matters because Toggler Button is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
important: The toggler must point to the collapse element via data-bs-target / aria-controls.
Toggler: Action Toggle
Section titled “Toggler: Action Toggle”Use Action Toggle (btnDataTooggle) to ensure the button is configured for Collapse. This step matters because Toggler: Action Toggle is part of Selection Panels Properties Btndatatooggle, and understanding that context makes the next action easier to repeat in your own project.
Toggler: Collapse Target
Section titled “Toggler: Collapse Target”Use Collapse (btnToggleTargetCollapse) to point the button at the correct collapse container. This step matters because Toggler: Collapse Target is part of Selection Panels Properties Btntoggletargetcollapse, and understanding that context makes the next action easier to repeat in your own project.
Collapse Container
Section titled “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.
Collapse: ID
Section titled “Collapse: ID”Use ID (theId) to set the collapse element identifier. This step matters because Collapse: ID is part of Selection Panels Properties Theid, and understanding that context makes the next action easier to repeat in your own project.
Nav Item
Section titled “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.
Wrap-up
Section titled “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
Section titled “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
Layout utilities go on the right node
Apply alignment utilities on the nav list or collapse container (not randomly on nested links).
Next steps
Section titled “Next steps”Continue with a related tour or go back to the Bootstrap tours index.