Page header

A React block (a whole screen) in Beamline's Blocks category.

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 or sidebar).
A section heading inside a page (a heading and a 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
tabs

Dependencies

lucide-react

Import

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 · Connect your agent