PageHeader

A project page header with breadcrumb, status, team and actions that folds into a compact bar as the page scrolls, over tabs whose counts roll when they change.

When to use

• The top of a detail page in an app (a project, customer or document) with a few sections as tabs.
• When the page is long and the title should stay reachable without taking the whole screen.
• Not for a marketing site navigation bar: use SiteHeader.
• Not for tabs on their own: use Tabs.

Usage

import { PageHeader } from "@/components/iris/blocks/page-header/page-header";

h(PageHeader);

Props

PageHeader takes no props. It is a complete, self-contained page frame (980 px wide at most, 640 px tall) with its content authored in the source:

Content	Value in the source
Breadcrumb	North ridge team / Projects / Public launch (an mpath project)
Status	On track, or Archived after the overflow menu's "Archive project"
Actions	Follow, Share update, overflow menu, New task
Tabs	Overview, Tasks, Updates, Documents, each with a count

To use it with your own data, copy the block and replace its sample constants.

Notes

• The frame scrolls internally; past 16 px the intro collapses and the bar condenses. Selecting a tab keeps the header condensed if it already was.
• Tabs are Radix Tabs (arrow keys move between tabs). The overflow menu has a highlight that glides between items.
• Sample people have no portraits, so avatars show initials. Breakpoints follow the frame's own width (container queries at 720, 560 and 460 px): secondary actions fold into the overflow menu and secondary columns drop.
• Reduced motion turns the folding, rolling counts and row transitions into instant changes.