Navbar

About the Neo-Brutal Navbar

The site header: logo, links and actions. bar is the kit's header: a full-bleed paper bar ruled with 2 px at the bottom, solid from the start, links centred (the current one on paper-2), actions at the end. floating is an inset outlined bar over a paper fade, so nothing shows around it. Under lg the links move into a popover panel that drops from under the bar (and, on phones, the actions too); the panel opens before hydration, closes on Esc, an outside tap, a link tap or its close key, and focus returns to the menu key. Client component.

It is part of Neo-Brutal. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.

To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.