Page Header

The heading block that opens a page: an optional breadcrumb above the title (nested pages only), an h1 title, optional supporting description, optional extra content below, and an optional right-aligned actions area for the page-level primary action. Use exactly one per page, at the top of the content area.

Top-level page

One per page, at the top of the content area. It owns every piece of page-level chrome — title, description, breadcrumb, actions — so none of it gets hand-rolled above it and drift apart between screens. No breadcrumb here: a crumb that just repeats the page's own title is noise.

Orders

Everything placed across every channel, newest first.

Nested page

A breadcrumb belongs only on a page nested under a parent list or section, where the first crumb links back to something real. Pass it through the breadcrumb snippet rather than placing a separate Breadcrumb block above the header.

Luxe Fashion

Connected 14 March 2026 · Shopify · Stripe

<PageHeader
	title="Luxe Fashion"
	description="Connected 14 March 2026 · Shopify · Stripe"
	class="mb-0!"
>
	{#snippet breadcrumb()}
		<Breadcrumb>
			<BreadcrumbItem>
				<BreadcrumbLink href="/blocks/orders">Orders</BreadcrumbLink>
			</BreadcrumbItem>
			<BreadcrumbSeparator />
			<BreadcrumbItem>
				<BreadcrumbPage>Luxe Fashion</BreadcrumbPage>
			</BreadcrumbItem>
		</Breadcrumb>
	{/snippet}
	{#snippet actions()}
		<Button variant="secondary">Open storefront</Button>
	{/snippet}
</PageHeader>

API

Prop	Type	Description
`title`	`string`	Page heading rendered as an `h1`.
`titleSuffix`	`import('svelte').Snippet`	Snippet rendered inline next to the title.
`description`	`string`	Optional muted supporting copy rendered under the title.
`breadcrumb`	`import('svelte').Snippet`	Optional snippet rendered above the title, for pages nested under a parent list/section (e.g. a merchant detail page under Merchants). Needs a real ancestor to link back to — omit on top-level pages.
`children`	`import('svelte').Snippet`	Optional snippet rendered below the description for extra metadata or filters.
`actions`	`import('svelte').Snippet`	Optional snippet rendered right-aligned on the same row — typically the page-level primary Button.
`class`	`string`	Additional Tailwind classes merged onto the header element.