A product header primitive with brand, navigation, and action slots.
Header defines how EnterUI handles a product header primitive with brand, navigation, and action slots, including default structure, accessible states, and token-driven styling.
Compose brand, nav, and actions as slots.
<Header>
<HeaderBrand>Console</HeaderBrand>
<HeaderNav>
<Button size="sm" variant="ghost">Docs</Button>
<Button size="sm" variant="ghost">Components</Button>
</HeaderNav>
<HeaderActions>
<Badge>Beta</Badge>
<Button size="sm">New</Button>
</HeaderActions>
</Header>import {
Badge,
Button,
Header,
HeaderActions,
HeaderBrand,
HeaderNav,
} from "@froggdesign/enter-ui-react";Use the primary variant for the main docs or product shell header.
<Header variant="primary">
<HeaderBrand>EnterUI</HeaderBrand>
<HeaderNav>
<Button size="sm" variant="ghost">Docs</Button>
<Button size="sm" variant="ghost">Components</Button>
<Button size="sm" variant="ghost">Themes</Button>
</HeaderNav>
<HeaderActions>
<Button size="sm">Get Started</Button>
</HeaderActions>
</Header>Header renders a semantic header. HeaderNav renders a nav, so provide meaningful link or button labels inside it.
Header supports sticky and variant="default" | "primary".HeaderBrand, HeaderNav, and HeaderActions are slot primitives.className.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.