Bootstrap Navbar

The <nav> element with .navbar. Sets display: flex, flex-wrap: wrap, and align-items: center.

Carries aria-label or is contained in a <header> landmark so assistive technology can identify it as site navigation. Bootstrap adds position: relative to allow dropdowns to escape the flex container.

The .navbar-brand — typically an <a> linking to the home page. Bootstrap gives it slightly larger font-size and removes the default link underline.

Can contain an image (logo) or text, or both. When both are used, add a small margin between them via Bootstrap's spacing utilities.

The .navbar-toggler button — visible only on breakpoints where the nav collapses. Triggers the collapse via data-bs-toggle="collapse" and data-bs-target.

Contains a .navbar-toggler-icon span (CSS hamburger icon). The button itself should carry aria-controls pointing to the collapse container and aria-expanded to reflect state.

The .collapse.navbar-collapse container wraps the nav links and any other right-side content. Bootstrap's JS toggles the .show class on this element.

Sets flex-basis: 100% on mobile so the expanded nav takes its own row, and flex-grow: 1 on desktop so it fills the remaining space.

The .navbar-nav list — a <ul> with display: flex, flex-direction: column on mobile and row on desktop. Each list item is a .nav-item containing a .nav-link.

Active links should carry aria-current="page" rather than just the .active class.