Navbar

Basic

The .navbar lays out a .navbar__brand, a .navbar__menu wrapping the .navbar__nav link list, and any trailing extras in a flex row. The nav sits on the leading edge and the extras (here an action button) trail. Mark the current page with data-state="active" on its .navbar__button, and fade an unreachable one with aria-disabled. This bar carries .navbar--expand, which keeps it horizontal at every width.

Responsive fold

A plain .navbar folds into a column behind the .navbar__toggle hamburger below the lg breakpoint (64rem), and rides as a horizontal row above it. Put data-stisla-navbar on the root and data-stisla-navbar-toggle on the hamburger, and the @stisla/vanilla layer animates the fold. The demo frame is narrower than lg, so the bar is folded — click the hamburger to toggle the menu.

Move the fold point with the .navbar--expand-* modifiers, named after the width at which the bar expands to a row (like a md: utility): --expand-sm, --expand-md, --expand-lg, or --expand-xl. Plain .navbar matches --expand-lg; .navbar--expand never folds.

Customization

These variables retune the navbar. Override on the root or any wrapper.