Site Header React block

Installation

Included with Uxelith Pro

Try it free. Install it with Pro.

Try it live above and customise it in the Studio for free. Pro members install the source with one command and export it from the Studio.

example.tsx

import { SiteHeader } from "@/components/site-header"

export default function Page() {
  return <SiteHeader />
}

Prop	Type	Default	Description
brand / homeHref	`string`	"Northwind" / "/"	Name beside the mark, and where it links.
links	`{ label; href?; items?: { label; href; description? }[] }[]`	4 examples	Main navigation; items turns an entry into a menu.
currentHref	`string`	—	Marks that link with aria-current="page".
secondaryAction / primaryAction	`{ label; href } \| null`	Sign in / Start free	Quiet link and main button; null hides either.
sticky	`boolean`	true	Stay at the top, gaining a backdrop after scrolling.
floating	`boolean`	true	Once scrolled, shrink into a floating rounded bar.
hideOnScroll	`boolean`	false	Slide away while scrolling down; return on scroll up.
scrollContainer	`RefObject<HTMLElement>`	window	The element that scrolls, when it isn't the window.

A labelled <nav>; the current page has aria-current="page".
Menus follow the disclosure pattern: buttons with aria-expanded and aria-controls; Escape, clicking away or tabbing out closes them and Escape returns focus.
The mobile menu button has aria-expanded and aria-controls; the closed menu is inert; Escape or choosing a link closes it.
Movement is instant under prefers-reduced-motion.