Nav Header is the primary top navigation bar, supporting default, menu, and compact menu layouts with full mobile and RTL support.
Loading demo: nav-header-real-world
npx sdaia-ui@latest add nav-header
import { NavHeader } from "@/components/ui/nav-header"<NavHeader type="default" />Standard top navigation header with logo and actions.
Loading demo: nav-header-default
Use surface="glass" to enable Glass Effect
Loading demo: nav-header-glass
Nav header with a full navigation menu expanded.
Loading demo: nav-header-menu
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 |