A reliable navbar toggle connects one button to one collapsible menu through a matching target and ID. Bootstrap then uses its JavaScript to add or remove the menu’s visible state at the appropriate responsive breakpoint.

The example below uses Bootstrap 5 syntax. Place the button and the collapsible container inside the same navigation element.

Navbar toggle: Build minimal responsive markup with button type and state

Use a responsive navbar wrapper, a button with an explicit type=”button”, and a collapse container with a unique ID:

Navigation wrapper: <nav class=”navbar navbar-expand-lg navbar-light bg-light”>

Toggle button: <button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#mainNav” aria-controls=”mainNav” aria-expanded=”false” aria-label=”Toggle navigation”>

Toggle icon: <span class=”navbar-toggler-icon”></span>

Collapsible menu: <div class=”collapse navbar-collapse” id=”mainNav”> … </div>

Close the button, menu, and navigation wrapper after adding the navigation links. The initial aria-expanded=”false” state indicates that the menu starts closed below the configured breakpoint. The JavaScript component updates that value when the menu opens or closes. The explicit button type prevents the control from submitting a surrounding form.

Connect the button to navbar-collapse with matching target and collapse ID values

The connection depends on three matching values:

• data-bs-target=”#mainNav” tells Bootstrap which element to control.
• id=”mainNav” identifies the target element. The ID must be unique, and the target must include the leading hash.
• class=”collapse navbar-collapse” gives the target Bootstrap’s collapsing behavior and navbar layout.

When the button is clicked, Bootstrap toggles the show class on the target and updates aria-expanded. If the target ID differs by one character, the button can appear correctly while doing nothing. Keep the button and target inside the same navbar unless your implementation deliberately uses a valid external target.

Display the navbar-toggler-icon across navbar-expand breakpoints

The navbar-toggler-icon is a visual span inside the button. It does not open the menu itself. Bootstrap CSS supplies its hamburger artwork through the navbar theme, so the span needs to remain inside a button with the navbar-toggler class.

navbar-expand-lg means the menu is expanded at large screens and wider. Below that breakpoint, the toggler is displayed and the menu can collapse. The equivalent patterns include navbar-expand-sm, navbar-expand-md, navbar-expand-xl, and navbar-expand-xxl. Without a navbar-expand class, the menu remains in its collapsed pattern at every width. At the expanded breakpoint, Bootstrap CSS hides the toggler and displays the navigation automatically.

Diagnose a navbar that will not collapse: CSS, JavaScript, classes, and versioned data attributes

• Check Bootstrap CSS. Confirm that the stylesheet loaded successfully. Missing CSS prevents the collapse rules, breakpoint behavior, and icon styling from working.
• Check Bootstrap JavaScript. Bootstrap 5 needs its JavaScript bundle or compatible JavaScript file. If the button’s aria-expanded value never changes and the target never receives show, the collapse plugin is not running.
• Check class names. Use navbar-toggler on the button, collapse navbar-collapse on the target, and navbar-toggler-icon on the icon span. Also check for custom CSS that overrides display or visibility.
• Match the Bootstrap version. Bootstrap 5 uses data-bs-toggle=”collapse” and data-bs-target=”#mainNav”. Bootstrap 4 uses data-toggle=”collapse” and data-target=”#mainNav”, with its corresponding JavaScript dependencies. Do not combine the two attribute systems.

If the show class appears after clicking but the menu remains hidden, inspect custom CSS. If it never appears, inspect the data attributes, target ID, JavaScript load, and Bootstrap versions first.