# App header (goodtabs UI)

An app shell header with a breadcrumb, a search trigger, actions and an avatar.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/app-header.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/app-header`

## Usage

```tsx
import { AppHeader } from "@/components/ui/app-header"

<AppHeader
  crumbs={[{ label: "Acme", href: "/" }, { label: "Projects", href: "/projects" }, { label: "Storefront" }]}
  onSearch={() => setOpen(true)}
  actions={<Button size="sm">New</Button>}
  user={{ name: "Priya Nair", image: "/priya.jpg" }}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| crumbs | `{ label: string; href?: string }[]` |  | The path to the current page. The last crumb is the page itself and gets aria-current. |
| onSearch | `() => void` |  | Renders the search trigger and runs when it is pressed. Omit to hide search. |
| searchPlaceholder | `string` | `"Search"` | Text inside the search trigger, and its accessible name on small screens. |
| actions | `ReactNode` |  | Right side, before the avatar. |
| user | `{ name: string; image?: string }` |  | The signed-in person. Initials are the fallback when there is no image. |
| sticky | `boolean` | `true` | Sticks to the top of its scroll container. |

## When to use

- The top bar of a signed-in app next to a sidebar
- When the page location should read as a path and search opens a command menu
- Dashboards, admin panels and settings areas

## When not to use

- For a marketing site, use the navbar
- When the search is a real text field rather than a trigger: use search-input instead
- On pages with no hierarchy, where a plain title would do

## Notes for agents

- It is a client component because the search trigger takes onSearch; a demo or page that passes it must be "use client"
- The trigger only looks like an input. Wire onSearch to your command menu and bind Cmd K yourself
- Crumbs are plain anchors; wrap in next/link yourself if you need prefetching
- Under sm the search collapses to an icon button named after searchPlaceholder

Docs: https://ui.goodtabs.co/components/app-header