Header

Header defines how EnterUI handles a product header primitive with brand, navigation, and action slots, including default structure, accessible states, and token-driven styling.

#Default usage

<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

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

#Variants

<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>

#Defaults and shell ownership

Header defaults to variant="default": a compact 60px minimum height and glass surface. primary uses an 80px desktop minimum height and a background mixed at 91% opacity. Both use the theme's 18px backdrop blur and saturation; blur affects content behind the header, not its children.

Header navigation links and plain action links use 14px medium body typography. HeaderBrand fits Media logos in a 180×60px frame without cropping. Use links for navigation and buttons for actions.

AppShellHeader only places the header in the shell grid. In workspace mode the shell slot is sticky; a standalone Header needs sticky explicitly. Horizontal HeaderNav hides at 900px normally, at 1280px inside workspace headers, and at 1100px inside documentation shells. It does not create a mobile menu. Provide an accessible menu or alternate navigation in your application. Do not copy the docs site's .site-header-* CSS.

#Accessibility

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

#API

• Header supports sticky and variant="default" | "primary" | "workspace" | "documentation".
• 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.

#Workspace presentation

Use <Header variant="workspace"> for the compact operational header. Its surface, spacing, and responsive behavior belong to Header and work without AppShell ancestry. primary retains the larger site-header presentation.

#Documentation navigation

variant="documentation" provides the shared 1320px centered site header with an 80px desktop height and a compact 64px mobile height. Navigation hides at 1100px; pass a labelled menu trigger through menu to expose alternate navigation. HeaderBrand compact replaces the full brand at 640px. The hidden brand is also removed from keyboard and screen-reader navigation. Supply the same destination and accessible name in both presentations.

Use aria-current="page" on the active link for assistive technology. Documentation navigation uses an 8px vertical/10px horizontal hit area and a 160ms hover transition. The active section has a rounded, theme-aware background with a subtle inset border. Hover adds a 1px underline with a 4px offset on both active and inactive links, while preserving the active background. The logo-to-navigation gap is 32px and links are separated by 2px. Route matching stays in your app. Action links hide on small screens in this variant; keep those destinations in the mobile menu. Icon buttons remain available.

<Header variant="documentation" sticky menu={menuTrigger}>
  <HeaderBrand compact={<Link href="/">Brand</Link>}>
    <Link href="/">Full brand</Link>
  </HeaderBrand>
  <HeaderNav aria-label="Primary">
    <Link href="/docs">Docs</Link>
    <Link href="/examples" aria-current="page">Examples</Link>
  </HeaderNav>
  <HeaderActions>{actions}</HeaderActions>
</Header>

menu and compact accept React nodes. Menu opening, focus management, and closing remain the responsibility of a menu primitive such as Sheet. Native links retain Tab navigation, Enter activation, and modified-click behavior.

#Active sections and mobile navigation

Set aria-current="page" on the selected link. Documentation headers show a compact rounded background and subtle inset border, using theme tokens in light and dark modes. Hover adds an underline without replacing the active indicator. Keyboard focus has an explicit outline; transitions respect reduced motion.

HeaderNav accepts orientation="horizontal" | "vertical" (default: horizontal). Use vertical navigation inside a mobile Sheet: it remains visible at every breakpoint, fills the available width, and gives each link a minimum 44px touch target. Resolve the most specific matching route so only one section is active, including on nested documentation pages.

Documentation headers support transparent wordmarks in HeaderBrand. On dark surfaces, the shared header renders the mark as a white silhouette so the logo stays legible without an added light background tile.