components / navbar
navbar.
fixed top nav with inline desktop links and a hamburger-driven slide-in panel below md. routes are caller-supplied; behavior split into a headless useNavbar hook. because it is position:fixed it owns its entrance animation via `entrance` — a transformed wrapper would become its containing block and render it at the wrapper's width.
resize narrow for the hamburger
installation
bunx @justin06lee/chrome@latest add navbarprops
| name | type | default | description |
|---|---|---|---|
| brand | ReactNode | - | left-side logo / name. |
| leftLinks | NavLink[] | - | items next to the brand on desktop; listed before links in the mobile panel. |
| links | NavLink[] | - | right-side items; listed after leftLinks in the mobile panel. NavLink = { label: ReactNode, href?, onClick?, id? } — omit href (with onClick) for a <button> item; id keys items when labels are nodes or hrefs repeat. |
| actions | ReactNode | - | right-side desktop extras. |
| menuLabel | string | 'menu' | heading atop the mobile panel. |
| linkComponent | ElementType | 'a' | anchor component for internal hrefs — pass your router's Link (e.g. next/link) for client-side navigation. external http(s) and '#' hrefs always render a plain <a>. |
| entrance | boolean | { y?: number; duration?: number; delay?: number } | - | fade + slide the bar in on mount. true uses the house entrance (y: -10, 0.8s); an object tunes offset, duration and delay. use this rather than wrapping <Navbar> in an animating element — the nav is position:fixed, so a wrapper carrying a transform becomes its containing block and inset-x-0 resolves against the wrapper instead of the viewport. honors prefers-reduced-motion by fading without the travel. |
| className | string | - | merges onto the <nav>; override `position` here to pin it inside a bounded frame. |