Header

Setup

import { Header } from '@fragments-sdk/ui';

Loading preview...

Prop	Type	Default	Description
`children`Required	`node`	Not set	Header content (use Header.Brand, Header.Nav, etc.)
`height`	`string`	`56px`	Header height
`position`	`enumstaticfixedsticky`	`static`	Position behavior (usually controlled by AppShell)
`icons`	`object`	Not set	Optional icon overrides for Header.Trigger (menu/close) and Header.NavMenu chevron
`style`	`object`	Not set	—

Use Header.SkipLink for accessibility (skip to main content)
In default layout: include Header.Brand for logo
In sidebar layout: omit Header.Brand (logo in sidebar)
Header.Trigger integrates with SidebarProvider for mobile menus
Header.Trigger composes your onClick handler with sidebar toggle behavior
Header.Nav is hidden on mobile; use sidebar for mobile navigation
Use Header.Spacer to push items apart
Use Header.NavMenu to group related nav items under a dropdown
Use Header.NavMenuItem inside Header.NavMenu for dropdown items
Header sub-components forward DOM props (id, aria-*, data-*, handlers) to their rendered elements
Header.NavItem asChild composes click handlers instead of overwriting the child handler
Use the Header icons prop to replace internal mobile trigger and dropdown chevron icons with any icon package
For rich dropdown content (titles, descriptions, icons), use NavigationMenu instead of Header.Nav
NavigationMenu also provides an automatic mobile drawer, replacing Header.Trigger + Sidebar for mobile nav

Accessibility