Skip to content
Aback UI

Block ยท Marketing

Site header

A sticky header with brand, primary navigation, optional search, theme toggle, actions, and a mobile sheet.

Beta4 componentsRegistry JSON (opens in a new tab)
the Site header preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add site-header

The block lands at components/blocks/site-header.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Pass brand as your logo link and links from your route config. Swap the anchors for your router's link component to keep client-side navigation.
  • activePath marks a link active when the current path equals or starts with its href, so nested pages keep their section highlighted.
  • onSearch is optional. Without it no search control renders; with it, wire the same handler to your keyboard shortcut and pass that shortcut as searchShortcut.
  • actions render on the right from md and at the bottom of the mobile sheet, so a sign-in or CTA is never lost on phones.

Accessibility

  • The header holds a labelled Primary navigation landmark, and the sheet holds a separate Mobile navigation with a title.
  • The current section carries aria-current=page and a brand wash, not colour alone.
  • The mobile trigger is a labelled button; the sheet traps focus, closes on Escape, and returns focus to the trigger.
  • Add a Skip Link before the header so keyboard users can jump to the content.