Header

The bar across the top of a page, divided into a leading slot, a middle and a trailing one. It renders a real <header>, which at the top level of a document is the banner landmark.

import { AppLogo, Button, Header } from 'neba';

<Header brand={<AppLogo name="Neba" showName />} actions={<Button size="sm">Sign in</Button>}>
  <nav>…</nav>
</Header>;

Props

Prop	Type	Default	Description
brand	ReactNode	—	The leading slot: the logo, the product's name, the thing that is the same on every page. An AppLogo, usually
children	ReactNode	—	The middle slot, usually the navigation
actions	ReactNode	—	The trailing slot: the account menu, the theme switch, the call to action. Laid out end-aligned, so a row of buttons needs no wrapper
alignshared	'start' | 'center' | 'end'	'start'	Where the middle slot sits. center puts it on the bar's own midline rather than in the space left over, which is what giving both ends an equal share is for
positionshared	'static' | 'sticky' | 'fixed'	'sticky'	How the bar sits in the page's scroll. sticky stays in the flow while holding the top of the window; fixed leaves the flow, and a PageLayout reserves its height
variantshared	'solid' | 'outline' | 'text'	'outline'	Weight of the sheet. The bar is never dyed, because what is on it arrives with colours of its own
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The bar's height floor and gutter. As on Box this is the size of the sheet and never touches the type scale
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. Arbitrary colour values are not accepted
densityshared	'default' | 'compact'	'default'	Padding only: never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. 0 means no shadow at all
divider	boolean	true	A hairline along the bottom edge. On by default: a bar pinned over a scrolling page has content passing underneath it at every moment
maxWidth	NebaMeasure | Partial<Record<NebaBreakpoint, NebaMeasure>>	'none'	Holds the row of slots to a measure and centres it while the sheet still spans the window. The same ladder Container uses, and the same lengths and per-breakpoint maps
padded	boolean	true	The gutter down each side of the row
label	string	—	The name the landmark is announced by. Worth writing when a page has more than one header in it
render	useRender.RenderProp	—	Renders something other than a div (render={<div />}). Base UI's own escape hatch

Every native <header> attribute passes through, apart from color and title, which the component uses for its own. The shared axes are described under prop conventions.

It works on its own. Inside a PageLayout it also registers itself, so a Sidebar that holds its place knows how far down the window to start.

Examples

brand · children · actions

The three slots. brand is the leading one: the logo, the product's name; children is the middle, usually the navigation; actions is the trailing one, laid out end-aligned so a row of buttons needs no wrapper of its own. A slot given nothing renders nothing.

align

Where the middle slot sits. start (the default) packs it against the brand. center puts it on the bar's own midline rather than in the space left over, which is why the two ends are given equal shares. end packs it against the actions.

import { useState } from 'react';
import { AppLogo, Button, Header, SegmentedButton, Segment, TextLink } from 'neba';
import type { NebaAlign } from 'neba';

export default function HeaderAlign() {
  const [align, setAlign] = useState<NebaAlign>('center');

  return (
    <div className="flex w-full flex-col gap-4">
      <SegmentedButton
        size="sm"
        value={align}
        onValueChange={(next) => setAlign(next as NebaAlign)}
      >
        <Segment value="start">start</Segment>
        <Segment value="center">center</Segment>
        <Segment value="end">end</Segment>
      </SegmentedButton>

      <Header
        align={align}
        position="static"
        brand={<AppLogo name="Neba" src="/128x128.png" showName size="sm" />}
        actions={
          <Button size="sm" variant="outline">
            Sign in
          </Button>
        }
        className="rounded-(--neba-radius-md)"
      >
        <nav className="flex items-center gap-4">
          <TextLink href="#" underline="hover">
            Docs
          </TextLink>
          <TextLink href="#" underline="hover">
            Pricing
          </TextLink>
        </nav>
      </Header>
    </div>
  );
}

position

sticky, the default, holds the bar against the top of the window while leaving it in the flow, so nothing has to be padded out of its way. fixed takes it out of the flow, and a PageLayout reserves its height. static lets it scroll away.

variant

The three weights say what they say everywhere: filled, hairline, none. The bar is never dyed by color (what is on it arrives with colours of its own), so the family shows up in the hairline and the focus rings.

import { AppLogo, Header } from 'neba';

export default function HeaderVariant() {
  return (
    <div className="flex w-full flex-col gap-4">
      {(['solid', 'outline', 'text'] as const).map((variant) => (
        <Header
          key={variant}
          variant={variant}
          position="static"
          brand={<AppLogo name="Neba" src="/128x128.png" showName size="sm" />}
          actions={<span className="text-(--neba-muted-fg) text-xs">{variant}</span>}
          className="rounded-(--neba-radius-md)"
        />
      ))}
    </div>
  );
}

maxWidth

Holds the row of slots to a measure and centres it while the sheet still spans the window. The same ladder Container uses (and the same lengths of your own, and the same per-breakpoint maps), so a header and the Container under it line up on the same edge at every width.

import { AppLogo, Button, Header } from 'neba';

export default function HeaderMeasure() {
  return (
    <Header
      position="static"
      maxWidth="sm"
      brand={<AppLogo name="Neba" src="/128x128.png" showName size="sm" />}
      actions={
        <Button size="sm" variant="outline">
          Sign in
        </Button>
      }
      className="rounded-(--neba-radius-md)"
    />
  );
}

divider

A hairline along the bottom edge, on by default. A bar pinned over a scrolling page has content passing underneath it at every moment, and a translucent sheet with nothing marking its edge reads as part of that.

Accessibility

• It renders <header>, which is the banner landmark when it is not inside an <article> or a <section>.
• Give it a label when a page has more than one <header> in it (an article's own and the site's), or a landmark list names neither.
• The navigation in the middle slot should be a <nav> of your own, with its own accessible name when a page has more than one.