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.

Tags: page-header app-header tabs breadcrumbs actions sticky dashboard saas
Dependencies: @base-ui/react(npm, opens in a new tab)lucide-react(npm, opens in a new tab)

Props

Other props pass through to the root element.

breadcrumbs
{ label: string; href?: string }[]
title*
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[]
Default []
menu
(PageHeaderAction | "separator")[]
Default []
Extra items that only live in the overflow menu.
tabs
PageHeaderTab[]
tab
string
defaultTab
string
onTabChange
(value: string) => void
sticky
boolean | number
Default 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.

Props
			Description
breadcrumbs	{ label: string; href?: string }[]	–
title*	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.