# Page header

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Blocks](https://beamline.io/components/blocks) category. Live demo: https://beamline.io/components/page-header

The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More menu when the width runs out, and tabs underneath; on long pages it can condense into a compact bar pinned to the top as you scroll.

## Use it for

- The top of a record, project or settings page: where it sits, what it is, its state, what you can do with it and its sub-views.

## Not for

- App-level navigation ([app-shell](https://beamline.io/components/app-shell) or sidebar).
- A section heading inside a page (a heading and a [button](https://beamline.io/components/button)).

## Anatomy

- breadcrumb
- media (optional avatar or icon tile)
- title
- status badge (dot and word)
- description
- meta row (people, updated time)
- actions: primary, secondaries, More menu
- tabs (with counts)
- tab panels (children)
- compact bar (condense): title that scrolls back to the top, status, primary action

## States

- all actions shown
- some actions folded into More (measured against the space they need)
- only the primary and More
- an action disabled
- a destructive menu item
- no tabs
- tab selected (controlled or not)
- condensed (condense: the header has scrolled by; a compact bar with title, status and the primary action is pinned to the top of the scrolling area)

## Keyboard

- Tab: breadcrumb links, actions, More, then the tab list
- More: Enter, Space or ↓ opens; ↑/↓ move; Enter runs; Esc closes and focus returns
- Tabs: ←/→ move between tabs, Home/End to the ends
- The compact bar's title returns to the top of the page and moves focus to the page title; the bar is inert while hidden

## Motion

Actions fold without animation (layout, not an event); the tab indicator slides between tabs; the menu opens on --motion-in. The compact bar fades in on --motion-in with a 6px drop and leaves on --motion-out; under reduced motion it only fades.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` (required) | `ReactNode` | — |  |
| `description` | `ReactNode` | — |  |
| `breadcrumb` | `BreadcrumbItem[]` | — | From the top level to this page; long paths fold their middle. |
| `status` | `{ label: string; tone?: BadgeTone }` | — | A word with a dot, never colour alone. |
| `media` | `ReactNode` | — | An avatar or icon tile before the title. |
| `meta` | `ReactNode` | — | A line under the description: people, dates, ids. |
| `actions` | `PageHeaderAction[]` | — | The first is the primary and always shows; the rest fold into More, from the end, when they do not fit. |
| `menu` | `MenuItem[]` | — | Items that always live in More (copy link, delete). |
| `tabs` | `PageHeaderTab[]` | — | value, label, count, icon, disabled, href (navigation mode: the tab is a link). |
| `tab / defaultTab / onTabChange` | `string` | — |  |
| `children` | `ReactNode` | — | Tab panels (TabsContent from tabs) or the page under the header. |
| `headingLevel` | `1 \| 2` | `1` |  |
| `className` | `string` | — |  |
| `condense` | `boolean` | `false` | Once the header scrolls by, a compact bar with title, status and the primary action stays pinned to the top of the scrolling area. |
| `classNames` | `PageHeaderClassNames` | — |  |
| `tabsMode` | `"panels" \| "navigation"` | — | panels: the tabs switch TabsContent children (tabs and tab panels). navigation: they switch pages or routes, a nav whose current item is aria-current=page, same look; a tab with href is a link. Default: panels when the children hold TabsContent (also in fragments), else navigation. Pass panels for panels wrapped in your own component. |
| `style / ref` | `CSSProperties / Ref<HTMLDivElement>` | — |  |
| `menuClassNames` | `MenuClassNames` | — | Shared overflow-menu parts; more targets its trigger and matching measurement copy. |

## Built from

- breadcrumb
- badge
- button
- [dropdown-menu](https://beamline.io/components/dropdown-menu)
- tabs

## Dependencies

`lucide-react`

## Import

```tsx
import { PageHeader } from "@/blocks/page-header/page-header";
```

## Get it

Page header is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Blocks

- [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation with streamed reasoning, cited answers and a plan that waits for approval then runs step by step, and an artifacts panel with…
- [Analytics dashboard](https://beamline.io/components/analytics-dashboard): A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime…
- [Auth page](https://beamline.io/components/auth): The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm…
- [Changelog feed](https://beamline.io/components/changelog-feed): An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last…
- [CRM pipeline](https://beamline.io/components/crm): A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a…
- [Empty states](https://beamline.io/components/empty-states): The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a…
- [Plan comparison](https://beamline.io/components/plan-comparison): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in…
- [Settings](https://beamline.io/components/settings): Profile and workspace settings with one draft and real save handler. Personal mode omits workspace data; optional profile fields share validation…
- [Sign in](https://beamline.io/components/sign-in): The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in…
- [Sign up form](https://beamline.io/components/signup-form): The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your…
- [Step form](https://beamline.io/components/step-form): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the…
- [Trading terminal](https://beamline.io/components/trading-terminal): A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account…
- [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a support panel that mixes typing and talking, a call screen with the agent's orb and one call button, and…