# Top bar

56px, white at 86% with a 10px blur, sticky. Breadcrumbs on the left; on the right the environment badge, the "?" help trigger (same spot on every page) and the account button.

- **Group:** Navigation and shell · **family:** `app-shell` · **shadcn:** composed
- **Build:** Layout; composes `Breadcrumb`, `Badge`, `Button`, `DropdownMenu`.
- **In apps/admin today:** apps/admin has a header in its shell.
- **Client component:** no. 

## Content rules

- Banner copy: "Engineers' staging copy. Orders here are not real."

## Do

- Keep "?" in the same place on every page.

## Don't

- Page actions in the top bar; they belong in the page header.

## Accessibility

- **Keyboard:** Order: crumbs, env (not focusable), help, account.
- **ARIA:** `<header>` landmark; help trigger `aria-expanded` + `aria-controls` the drawer.
- **Focus:** Ring on each control.

## Tokens

`--topbar-h` `--s-3` `--s-5` `--border` `--background` `--blur-glass` `--pbar-h` `--w-semibold` `--font-voice` `--control-h-m` `--font-stretch-title` `--r-chip` `--motion-hover` `--foreground` `--s-2` `--text-small` `--warning` `--s-1` `--muted` `--r-pill` `--motion-focus` `--secondary-border` `--ring` `--text-card` `--muted-foreground`

## Files

`top-bar.html` live specimen · `top-bar.css` kit rules · `top-bar.d.ts` props · full page: `docs/components/top-bar/` (phone: `m/`).