Site

Site header

The yellow navigation band. Links collapse behind a menu button on small screens.

import { SiteHeader, SiteHeaderLink } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Header

site-header/default.tsx

import { Button, Logo, SiteHeader, SiteHeaderLink } from '@jsonresume/ui';

export default function SiteHeaderDefault() {
  return (
    <SiteHeader
      brand={<Logo />}
      actions={
        <Button variant="ink" size="sm">
          Sign in
        </Button>
      }
    >
      <SiteHeaderLink href="#getting-started" active>
        Getting Started
      </SiteHeaderLink>
      <SiteHeaderLink href="#schema">Schema</SiteHeaderLink>
      <SiteHeaderLink href="#themes">Themes</SiteHeaderLink>
      <SiteHeaderLink href="#docs">Docs</SiteHeaderLink>
    </SiteHeader>
  );
}

Usage

Do

Keep it to five to seven top-level links.
Mark the current section with active.

Don’t

Add a second navigation band below it.

Accessibility

Renders a <header> with a named <nav> landmark.
The menu button exposes aria-expanded and aria-controls.
active sets aria-current="page".

Props

Also accepts the attributes of the element SiteHeader renders.
Prop	Type	Default	Description
brand required	ReactNode	–	The brand slot, usually <Logo />.
actions	ReactNode	–	Buttons shown after the navigation (e.g. sign in).
menuLabel	string	Menu	Accessible name of the small-screen menu button.
navLabel	string	Main	Accessible name of the navigation landmark.

Also accepts the attributes of the element SiteHeaderLink renders.
Prop	Type	Default	Description
active	boolean	–	Marks the link for the current page.
asChild	boolean	false	Style a router link passed as the only child.