Nav Header
Nav Header is the primary top navigation bar, supporting default, menu, and compact menu layouts with full mobile and RTL support.
Loading preview…
1
<NavHeader2
mobile={false}3
type="default"4
items={NAV_ITEMS.map((label) => (5
<NavHeaderMenuItem key={label} label={label} selected={selected === label}Installation
npx sdaia-ui@latest add nav-header
Usage
import { NavHeader } from "@/components/ui/nav-header"<NavHeader type="default" />Examples
Default
Standard top navigation header with logo and actions.
Loading preview…
1
<NavHeader2
type="default"3
items={['Services', 'Analytics'].map((label, idx) => (4
<NavHeaderMenuItem5
key={String(idx + 1)}Menu
Nav header with a full navigation menu expanded.
Loading preview…
1
<NavHeader2
type="menu"3
items={[/* NavHeaderMenuItem × 2 */]}4
search={<TextInput placeholder="Search" fullWidth />}5
actions={<NavHeaderActions />}API Reference
NavHeaderProps
Prop | Type | Default | Required |
|---|---|---|---|
type | 'default' | 'menu' | 'menu-compact' | 'default' | optional |
mobile | boolean | - | optional |
menuOpen | boolean | false | optional |
onOpenChange | (open: boolean) => void | - | optional |
logo | ReactNode | - | optional |
items | ReactNode[] | - | optional |
search | ReactNode | - | optional |
actions | ReactNode | - | optional |
menuContent | ReactNode | - | optional |
mobileFooter | ReactNode | - | optional |
className | string | - | optional |