composed · Composed pattern rsc-safe

PageHeader

@devalok/shilp-sutra/composed/page-headerView in Storybook

Preview

Projects

Everything your team is shipping this quarter.

Variants

with breadcrumbs

Orbit redesign

A ground-up refresh of the marketing surface.

title only

Settings

with actions

Team

Reference

Import: @devalok/shilp-sutra/composed/page-header
Server-safe: Yes
Category: composed

Props

title: string (falls back to last breadcrumb label if omitted)
subtitle: string
actions: ReactNode (action buttons)
breadcrumbs: Breadcrumb[] — { label: string, href?: string }
titleClassName: string

Defaults

None

Example

<PageHeader
  title="Project Settings"
  subtitle="Configure your project preferences"
  breadcrumbs={[
    { label: 'Home', href: '/' },
    { label: 'Projects', href: '/projects' },
    { label: 'Settings' },
  ]}
  actions={<Button>Save</Button>}
/>

Composability

Server-safe page-top header with title + subtitle + breadcrumbs + actions slot. Renders Breadcrumb internally from the breadcrumbs array.
Auto-derived title: If title is omitted, the last breadcrumb's label becomes the h1. Saves duplication when the page title matches the breadcrumb leaf.
Breadcrumb contract: Last item should NOT have an href (it's the current page — renders as BreadcrumbPage, not a link). Items with href render as BreadcrumbLink.
actions slot: Typically one to three buttons (Save, Cancel, More). The slot wraps onto its own line under the title on narrow viewports instead of forcing horizontal overflow, so multiple/wide buttons are mobile-safe. For larger action groups, use ButtonGroup or a toolbar.
Not for tabs / sub-navigation — pair with Tabs rendered below PageHeader for that.

Gotchas

Server-safe: can be imported directly in Next.js Server Components
If title is omitted, the last breadcrumb's label is used as the page title
The last breadcrumb should not have an href (it represents the current page)

Changes

v0.2.0

Added Identified as server-safe component

v0.1.0

Added Initial release