Site Header

The marketing header — a sticky, glassy bar that gains a border and shadow on scroll, with desktop click-to-open mega-menus (single-open, outside-click / Escape to close) and a full-width mobile menu on the nx-ui Popover. Nav data is fully props-driven; pass a logo node and CTAs.

$bunx shadcn@latest add @nx-ui/site-header
Registry item
Installs withbuttonpopoverutils

With mega-menus

Click Platform or Solutions to open a mega-menu; Platform uses the two-column wide layout with a gradient footer CTA. Resize to mobile to see the Popover menu. (Scroll elevation triggers on the real page, not this framed canvas.)

Nexus ReGen
Page content sits below the sticky header.

API reference

Exported parts and their props, extracted from the component source.

PropTypeDefaultDescription
navItems*NavItem[]——
logoReact.ReactNode——
ctas{ primary?: { label: string; href: string } secondary?: { label: string; href:…——
classNamestring——