# Page Header

> The header at the top of an app page: breadcrumbs, an icon, the title with a status dot, a description, a row of facts, actions with an overflow menu and tabs with counts underneath. Secondary actions fold into the menu on narrow pages. The tab bar pins as you scroll, and once the title is gone a small copy of it slides in beside the tabs with the primary action.

- Slug: `page-header`
- Category: [Navigation](https://www.assembli.design/category/navigation.md)
- Type: component
- Tags: page-header, app-header, tabs, breadcrumbs, actions, sticky, dashboard, saas
- npm dependencies: @base-ui/react, lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/page-header
- Page: https://www.assembli.design/components/page-header

![Page Header preview](https://www.assembli.design/thumbnails/page-header-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `breadcrumbs` | `{ label: string; href?: string }[]` |  |  |
| `title` (required) | `React.ReactNode` |  |  |
| `icon` | `React.ReactNode` |  | A mark before the title: an app icon, avatar or tile. |
| `status` | `PageHeaderStatus` |  |  |
| `description` | `React.ReactNode` |  |  |
| `meta` | `{ icon?: React.ReactNode; label: React.ReactNode }[]` |  | Small facts under the title: owner, last update, environment. |
| `actions` | `PageHeaderAction[]` | `[]` |  |
| `menu` | `(PageHeaderAction \| "separator")[]` | `[]` | Extra items that only live in the overflow menu. |
| `tabs` | `PageHeaderTab[]` |  |  |
| `tab` | `string` |  |  |
| `defaultTab` | `string` |  |  |
| `onTabChange` | `(value: string) => void` |  |  |
| `sticky` | `boolean \| number` | `true` | Keep the tab bar pinned while the page scrolls. Once the title has scrolled away, the bar picks up a small copy of it and the primary action. A number offsets it under another sticky bar. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/page-header/page-header.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/page-header
```

Registry item JSON: https://www.assembli.design/r/page-header.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.