Header Blocks

A full-width site header with logo, navigation links, a call-to-action, and a mobile menu sheet.

A three-column header with logo pinned left, nav links absolutely centred, and a sign-in link plus primary CTA on the right, above a skeleton page-content placeholder.

Responsive sticky site header with logo, desktop nav, sign-in, a primary CTA, and a useState-toggled mobile menu sheet. Composable into page templates.

A site header with a Product navigation menu of links, inline nav, sign-in and CTA buttons, and a mobile sheet menu.

Pro floating morph header: a flush full-width bar that detaches on scroll into a centered island, its max-width contracting while border, shadow, and translucent blur fade in, all spring-smoothed and reversible; static detached state under reduced motion, with a staggered mobile sheet.

Pro mega-menu header built on the NavigationMenu primitive: three triggers share one animated viewport that morphs its size and cross-fades content as you move between them, with hover intent, full keyboard and Escape support, plain links alongside, and a mobile sheet with accordion sections.

Pro hide/reveal header: scrolling down slides the whole bar away, any upward scroll snaps it back with a spring, and a dismissible announcement banner collapses permanently past the first fold; border and shadow fade in once scrolled, always-visible under reduced motion, with a staggered mobile sheet.

Pro segmented pill-nav header: a soft pill slides (motion layoutId) behind the hovered link and snaps back to the active one, while an IntersectionObserver scroll-spy moves the active pill as you scroll the page sections; instant placement under reduced motion, with a mobile sheet that highlights the active section.

Pro transparent-over-hero header: a mega-menu nav with white triggers over a full-bleed dark photo hero cross-fades to a solid bordered bar with page-theme colors once the hero scrolls past; the hero carries no copy so it drops into any page, reversible, solid under reduced motion, with a page-theme mobile sheet.

Pro double-decker utility header: a top row with a contact link, a locale select, and social icon links scrolls away while the main row sticks, gaining blur and a border and morphing its CTA width as it sticks; nav links draw an underline in from the left on hover, with a mobile sheet that groups the utility links in its footer.

Pro full-screen overlay menu: a minimal bar with a Menu button whose hamburger morphs to an X and opens a full-viewport overlay of oversized nav links that stagger-rise with a blur-in, plus a footer meta row; links reveal an arrow on hover, Escape and scrim close it, focus is trapped, and it opens instantly under reduced motion.

Pro command-bar header: a docs-style sticky-blur bar with a search field trigger showing a Ctrl+K hint that opens a Command palette (grouped Pages, Blocks, and Actions) bound to a real Ctrl+K shortcut; the trigger pulses once when it first appears, and on mobile it collapses to an icon that opens the same palette.

Pro centered-logo header: dropdown navigation menus on the left, a centered wordmark, and social links plus a primary CTA on the right, over a sticky blur bar with a mobile sheet.