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
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
Orient yourself in Properties panel
Start with the wider context in the Properties panel so the next step can focus on navbar theming and where those options appear in the current UI.
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
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.
Navbar positioning
Review the selected navbar in Properties to control how it behaves in the page flow, including standard, fixed, and sticky positioning options.
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.
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
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
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
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
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
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
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
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
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
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
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
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.