A navbar is a site's responsive header: a .navbar holding a .navbar-brand, a .navbar-toggler button and a .collapse.navbar-collapse wrapper around a .navbar-nav list. .navbar-expand-{sm|md|lg|xl|xxl} sets the breakpoint: from that width up the links sit in a row; below it they hide behind the toggler ("hamburger") button.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<nav class="navbar navbar-expand-sm bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">WebCoding</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav1"
aria-controls="nav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav1">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Tutorials</a></li>
<li class="nav-item"><a class="nav-link" href="#">Books</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script>
const copy = document.body.appendChild(document.querySelector('nav').cloneNode(true));
copy.className = 'navbar navbar-expand-lg bg-body-tertiary mt-3'; // light, expands at 992px
copy.removeAttribute('data-bs-theme');
copy.querySelector('.collapse').classList.add('show'); // open the menu for the screenshot
</script>
At 720 pixels the dark navbar-expand-sm bar is a row, while the light navbar-expand-lg copy shows the toggler, opened to reveal the stacked menu a phone user sees. Clicking the toggler runs the Collapse plugin (Collapse).
Since 5.3.0, use data-bs-theme="dark" instead of .navbar-dark. .fixed-top pins the bar to the viewport (add body padding), .sticky-top pins it once scrolled to the top, and an offcanvas panel (Offcanvas) can replace the collapse wrapper.