Skip to content
← Inventory

PageHeader

Canonical page header — a consistent sub-header area below the main app HeaderBar. Composes with PageHeaderTitle, PageHeaderTabs, PageHeaderActions, and (for multi-row layouts) PageHeaderRow. For single-row layouts (default):

Materials

128 in library

Usage

@desk/ui/components/page-header

<PageHeader>
  <PageHeaderTitle size="xl" subtitle="128 in library">
    Materials
  </PageHeaderTitle>
  <PageHeaderActions>
    <Button emphasis="soft" icon={SlidersHorizontal} tone="neutral">
      Filter
    </Button>
    <Button icon={Plus} tone="brand">
      Add material
    </Button>
  </PageHeaderActions>
</PageHeader>

Best practices

  • Compose the slotted parts (PageHeaderTitle/PageHeaderTabs/PageHeaderActions) rather than raw divs — the root arranges them and shares sticky state via context.

  • Set layout="stacked" and wrap each row in PageHeaderRow for multi-row headers; the default "single" is a fixed-height flex row and won't lay out multiple rows.

  • PageHeader is the sub-header below the app HeaderBar, not the app chrome itself — use AppShell/HeaderBar for the top-level frame; its sticky offset assumes that header is present.

Props

PageHeader

PropTypeDefaultDescription
stickyboolean

When true, the header sticks to the top of the viewport when scrolling.

layout"single" | "stacked"

Layout mode — "single" for one row, "stacked" for multiple rows using PageHeaderRow.

PageHeaderTitle

PropTypeDefaultDescription
children(required)React.ReactNode

Title content — a string or custom React nodes.

collapseOnScrollboolean

When true, the heading fades out and collapses as the page scrolls past it — useful for standalone page titles beneath a fixed app header. Defaults to false.

collapseOnScrollDistancenumber

Distance in px the page must scroll before the heading fully collapses.

levelHeadingLevel | undefined

Heading level for semantic HTML (h1-h6). Defaults to "1".

metaReact.ReactNode

Optional inline metadata rendered beside the heading, such as a count.

sizeResponsiveValue<"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"> | undefined

Visual size — accepts a static size or responsive object. Defaults to "lg".

subtitleReact.ReactNode

Optional subtitle text displayed below the title.

Also exports

  • componentPageHeaderActions
  • componentPageHeaderRow
  • componentPageHeaderTabs
  • constusePageHeader

Composition

Builds on

Heading, Text