# App Header

> A responsive app bar with bar, floating, and compact variants.

- Category: Navigation
- Kind: component
- Page: https://uaiblocks.dev/components/app-header
- Registry item: https://uaiblocks.dev/r/app-header.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/app-header.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/app-header.json
```

## Usage

```tsx
"use client";

import { Bell, Boxes } from "lucide-react";
import { useState } from "react";
import {
  AppHeader,
  AppHeaderAction,
  AppHeaderActions,
  AppHeaderBrand,
  AppHeaderMenuButton,
  AppHeaderNav,
  AppHeaderNavItem,
  AppHeaderOverflow,
  AppHeaderSearch,
  type AppHeaderVariant,
} from "@/components/ui/uai/app-header";

export function AppHeaderPreview({ variant = "bar" }: { variant?: AppHeaderVariant }) {
  const [open, setOpen] = useState(false);

  return (
    <div
      className={
        variant === "floating"
          ? "w-full max-w-[920px] px-3"
          : variant === "compact"
            ? "w-full max-w-[780px]"
            : "w-full max-w-[920px]"
      }
    >
      <AppHeader variant={variant} open={open} onOpenChange={setOpen}>
        <AppHeaderBrand href="#workspace">
          <span
            className="grid size-6 shrink-0 place-items-center rounded-[7px] bg-[var(--uai-text)] text-[var(--uai-surface)]"
            aria-hidden="true"
          >
            <Boxes className="size-3.5" strokeWidth={1.8} />
          </span>
          Atlas
        </AppHeaderBrand>

        <AppHeaderOverflow>
          <AppHeaderNav>
            <AppHeaderNavItem href="#overview" active>
              Overview
            </AppHeaderNavItem>
            <AppHeaderNavItem href="#projects">Projects</AppHeaderNavItem>
            <AppHeaderNavItem href="#reports">Reports</AppHeaderNavItem>
          </AppHeaderNav>
          <AppHeaderSearch placeholder="Search workspace" />
        </AppHeaderOverflow>

        <AppHeaderActions>
          <AppHeaderAction aria-label="Notifications">
            <Bell className="size-4" strokeWidth={1.8} aria-hidden="true" />
          </AppHeaderAction>
          <AppHeaderAction aria-label="AC, open account menu" emphasis="primary">
            AC
          </AppHeaderAction>
        </AppHeaderActions>
        <AppHeaderMenuButton />
      </AppHeader>
    </div>
  );
}
```

## Anatomy

- `AppHeader`
  - `AppHeaderBrand`
  - `AppHeaderOverflow`
    - `AppHeaderNav`
      - `AppHeaderNavItem`
    - `AppHeaderSearch`
  - `AppHeaderActions`
    - `AppHeaderAction`
  - `AppHeaderMenuButton`

## Accessibility

- The root uses the native banner landmark and navigation keeps list semantics.
- The active destination exposes aria-current without relying on color.
- Search has a persistent accessible label and remains consumer-controlled.
- The mobile menu button names its action and exposes expanded and controlled state.
- Account actions are native buttons with explicit accessible names.
- Bar, floating, and compact variants preserve the same navigation contract.