App Header

Install

Install manually View source on GitHub

Anatomy

AppHeader
AppHeaderBrand
AppHeaderOverflow
AppHeaderNav
AppHeaderNavItem
AppHeaderSearch
AppHeaderActions
AppHeaderAction
AppHeaderMenuButton

Accessibility6 checks

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.

Application shell

Atlas

Code example

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>  );}

Manual installation

app-header.tsx

Loading component source…