<SiteHeader.Root>
<SiteHeader.Bar>
<SiteHeader.Brand href="/"><BrandLogo /></SiteHeader.Brand>
<SiteHeader.Nav>
<SiteHeader.NavList>
<SiteHeader.NavItem href="/#pricing">Pricing</SiteHeader.NavItem>
</SiteHeader.NavList>
<SiteHeader.Actions>
<Button size="sm">I'm hiring</Button>
</SiteHeader.Actions>
</SiteHeader.Nav>
<SiteHeader.MobileToggle aria-label="Open or close the menu" />
</SiteHeader.Bar>
<SiteHeader.MobileMenu>
<SiteHeader.MobileNavItem href="/#pricing">Pricing</SiteHeader.MobileNavItem>
</SiteHeader.MobileMenu>
</SiteHeader.Root>MobileToggle and MobileMenu share their open state through the root, so the
two lists are declared separately but only one is ever visible.
API
SiteHeader.Root
| Prop | Type | Default | |
|---|---|---|---|
defaultOpen | boolean | false | Whether the mobile menu starts open. Leave it off: the menu server-renders closed and hydrates, so opening by default flashes on first paint. |
Plus every <header> prop. Source: landing/components/site-header/root.tsx.
SiteHeader.Actions
Plus every <div> prop. Source: landing/components/site-header/actions.tsx.
SiteHeader.Bar
| Prop | Type | Default | |
|---|---|---|---|
aria-label | string | — | Defines a string value that labels the current element. |
Plus every <nav> prop. Source: landing/components/site-header/bar.tsx.
SiteHeader.Brand
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <a> prop. Source: landing/components/site-header/brand.tsx.
SiteHeader.MobileActions
Plus every <li> prop. Source: landing/components/site-header/mobile-actions.tsx.
SiteHeader.MobileMenu
Plus every <div> prop. Source: landing/components/site-header/mobile-menu.tsx.
SiteHeader.MobileNavItem
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <a> prop. Source: landing/components/site-header/mobile-nav-item.tsx.
SiteHeader.MobileToggle
| Prop | Type | Default | |
|---|---|---|---|
aria-label | string | required | Defines a string value that labels the current element. |
Plus every <button> prop. Source: landing/components/site-header/mobile-toggle.tsx.
SiteHeader.Nav
Plus every <div> prop. Source: landing/components/site-header/nav.tsx.
SiteHeader.NavItem
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <a> prop. Source: landing/components/site-header/nav-item.tsx.
SiteHeader.NavList
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <ul> prop. Source: landing/components/site-header/nav-list.tsx.