Get Started
LayoutUpdated May 3, 2026

Header

A product header primitive with brand, navigation, and action slots.

#Default usage

HeaderCompose brand, nav, and actions as slots.
Console
Beta

#Usage

Code
import {
  Badge,
  Button,
  Header,
  HeaderActions,
  HeaderBrand,
  HeaderNav,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <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>
  );
}

#Accessibility

Header renders a semantic header. HeaderNav renders a nav, so provide meaningful link or button labels inside it.

#API

  • Header supports sticky.
  • HeaderBrand, HeaderNav, and HeaderActions are slot primitives.
  • All slots support className.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page