MarketingHeader
A marketing site header: brand mark, inline primary nav on desktop, and a collapsible panel on mobile. Client Component (owns the open/close state). Theme-driven.
Installation
pnpm
pnpm dlx @hex-core/cli add marketing-headerAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
logorequired | ReactNode | — | Brand mark — a logo / wordmark node, ideally wrapping a link to '/'. |
links | object | — | ReadonlyArray<{ label: ReactNode; href: string }>. Primary nav links shown inline on ≥md and stacked in the mobile panel. |
actions | ReactNode | — | Trailing actions (sign-in / CTA buttons). |
className | string | — | Additional classes applied to the root <header>. |
AI Guidance
When to use
Use as the top nav of a marketing / landing site. Pair with marketing-hero directly below it.
When not to use
Don't use as an in-app navigation chrome (use the sidebar / navigation-menu components). Don't nest interactive menus inside — keep links flat.
Common mistakes
- Passing more than ~5 links — the inline row gets crowded; group secondary items under the CTA or a footer.
- Putting raw <a> tags in actions instead of <Button asChild><a>…</a></Button>, losing button styling.
- Forgetting the logo links to '/' — wrap the logo node in an anchor.
Accessibility
The mobile toggle is a <button> with aria-expanded + aria-controls pointing at the panel and an aria-label that flips between 'Open menu' / 'Close menu'. Links are real anchors, keyboard-focusable, with visible focus rings.
Related components
Token budget: 700
Verified against @hex-core/components@1.12.0