Bootstrap 5 Navbar

How it works

A navbar combines branding, navigation and a responsive disclosure region. navbar-expand-lg keeps the contents visible from lg upward and uses the toggler below that width. The toggler is a real button with a name, target and expanded state. The collapse plugin supplies behaviour; CSS alone only defines the layout states. This example’s links target sections on the same page and its header belongs to a standalone lab, not a replacement for Bhylu’s approved header.

Run and inspect

Save the complete document as index.html in a separate lab folder. Place Bootstrap 5.3.8 CSS and the matching JavaScript bundle beside it. Open the file in a normal browser. A separate local static server is optional; no database or PHP execution is required. Keep the Bootstrap licence and bundled Popper licence with redistributed assets.

Download this complete HTML source.

This example needs the complete local setup with the Bootstrap JavaScript bundle. The restricted CSS playground does not reproduce this example’s full contract.

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Collapse a Header at a Content-appropriate Width</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container"><a class="navbar-brand" href="#event">Repair day</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#repair-menu" aria-controls="repair-menu" aria-expanded="false" aria-label="Open event navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="repair-menu"><div class="navbar-nav ms-auto"><a class="nav-link" href="#sessions">Sessions</a><a class="nav-link" href="#arrival">Arrival</a></div></div></div></nav><main class="container py-4" id="event"><h1 class="h3">Repair day</h1><section id="sessions"><h2 class="h5">Sessions</h2><p>Paper and fabric repair practice.</p></section><section id="arrival"><h2 class="h5">Arrival</h2><p>Use the east entrance.</p></section></main>
  <script src="bootstrap.bundle.min.js"></script>
</body>
</html>

Expected result

The navigation is collapsed behind a named toggler when narrow and visible without that toggler on a wide viewport.

The control’s target ID matches the collapse region. Its aria-expanded state changes when it opens. The review tests that narrow-state transition and wide-state visibility. A real site may need an additional close-on-navigation policy; do not assume selecting an anchor automatically solves every mobile-menu behaviour.