Layout

PageHeader

PageHeader - one header per page: an ancestors-only breadcrumb row, the page title (`<h1>`), and the page's own actions, right-aligned. Page-header contract (shared with AdminShell in smrt-svelte/workspace): - `crumbs` are the page's ancestors only, never the page itself; none on section homes. Inside a shell that sets `setPageHeaderContext()`, pages pass only `parents` (ancestors the nav doesn't know, e.g. the article above its video) and the shell adds the rest; the shell also hears the title (for its phone top bar). smrt-svelte's `shellPageTrailFor()` computes such a trail from a nav. - The crumb row carries `data-shell-breadcrumbs` and the title `data-shell-page-title`: on phones AdminShell hides crumbs only when its top bar declares `data-shell-page-navigation-replacement`, and visually hides the title only with `data-shell-page-title-replacement`. - No in-page back link: the crumbs (and the phone top bar) are the way back. `backHref` is kept only for pages outside such a shell. - An editable title (`titleField`, e.g. an article's headline) renders inside the `<h1>`, so the heading is still the page's title in the outline and is named by the field's value, while the field keeps its own label. Such a heading has no `data-shell-page-title`: it stays visible on phones, because it is the input. Pass the live value as `title` so the shell (the phone top bar) follows along as the person types.

Public export

typescript

import { PageHeader } from '@happyvertical/smrt-ui/layout';

Import path: @happyvertical/smrt-ui/layout
Props: 12
Props described: 12 of 12
Bindable state: 0
Callback events: 0
Verified release: 0.57.40

Props

NameTypeRequiredDescription

titlestringYesPage title

subtitlestringNoOptional subtitle/description

crumbsreadonly PageHeaderCrumb[]NoAll ancestors of this page, outermost first (never the page itself). Overrides the shell's trail; usually pass `parents` instead.

parentsreadonly PageHeaderCrumb[]NoAncestors past the shell's nav, outermost first.

shortTitlestringNoShorter title for the shell (e.g. its phone top bar); default `title`.

crumbsLabelstringNoAccessible name of the breadcrumb nav.

backHrefstringNoBack navigation URL.

backLabelstringNoBack link label

titleFieldSnippetNoAn editable title rendered inside the `<h1>` in place of `title`'s text (a labelled text field styled as the heading). `title` still names the page for the shell; keep it in sync with the field's value.

actionsSnippetNoSlot for action buttons (right-aligned beside the title)

metaSnippetNoSmall line under the title (status, dates, counts)

childrenSnippetNoSlot for additional content below the title row (e.g. page tabs)

Public export

Props

Bindable state

Callback events

Examples and explanation