Navbar
Site header: brand, links and actions on desktop; a full-width menu with large links on phones. Hairline on scroll, optional hide-on-scroll.
import { Navbar, NavbarLink } from "pleate/navbar";Site header
Narrow the window to see the phone menu.
Props
- brand / actions
Start and end of the bar.
ReactNode- children
Shown in the bar and in the phone menu.
NavbarLink[]- panelFooter
Bottom of the phone menu.
ReactNode- sticky / hideOnScroll
Scroll behavior.
booleandefault true / false- NavbarLink active / asChild
Current page; use with Next <Link>.
boolean
Accessibility
- Menu button has aria-expanded and aria-controls.
- Escape closes the phone menu; body scroll locks while open.
- Active link gets aria-current="page".