PageHeader
A page header information area with title, subtitle, back button, breadcrumb, a body area and a bottom action area. Commonly used at the top of detail and edit pages.
Basic usage
Title and subtitle
With back button
Back button
Avatar
The avatar named slot renders between the back button and the title block (a "back + avatar + title" layout); compose it with the oas-avatar component. The block is not rendered when empty.
avatar slot
Breadcrumb
Place a breadcrumb in its own top row via slot="breadcrumb", composing the oas-breadcrumb component.
breadcrumb slot
Title and subtitle slots
The title / subtitle can be plain text via attributes, or rich content (icons, badges, links…) via slot="title" / slot="subtitle" — the slot takes precedence over the attribute text when present.
title / subtitle slots
Right-side action area
extra slot
Body area
Body content goes below the title row via the default slot; the block is not rendered when empty.
content default slot
Bottom action area
footer slot
Custom back icon
back-icon slot
Full combination
A full combination of breadcrumb + title row + body + bottom actions.
All blocks combined
Event feedback
Back event
Transparent background variant (ghost)
ghost gives the header a transparent background (the background rule is set to none; title/text colors keep the theme foreground token) and removes the footer divider. It is meant to sit on colored backgrounds / pages so the underlying color shows through. The comparison below uses a neutral-tinted container: the default keeps the footer divider, while ghost is pure surface with no divider.
ghost transparent background (tinted container comparison)
Responsive compact layout (responsive)
The responsive boolean attribute switches to a compact layout automatically when the component width drops below 768px: the title font-size steps down (xl→lg), the subtitle steps down (sm) and the subtitle/extra wrap (.row gains flex-wrap, letting the title keep its own row without being squeezed). A ResizeObserver watches the host width (cleaned up via onCleanup); widening the container restores the normal layout automatically. It kicks in when narrowing the browser window or on mobile viewports.
responsive compact layout
Narrow the window below 768px: the title steps down and the subtitle/actions wrap; widening restores the layout.
API
oas-page-header
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
back | Whether to show the back button | boolean | — |
ghost | Transparent-background variant: the header background rule is set to none (forced transparent so the container/page background shows through) and the footer divider is removed; title/text colors keep the theme foreground token; all other layout is unchanged | boolean | — |
responsive | Responsive compact layout: when the component width is below 768px the title font-size steps down (xl→lg), the subtitle steps down (sm) and the subtitle/extra wrap (.row flex-wrap); a ResizeObserver watches the host width, cleaned up via onCleanup | boolean | — |
subtitle | Subtitle text | string | — |
title | Title text (rendered into the visible title region; absorbed from the host on read so no native hover tooltip remains; pass an empty string to clear) | string | — |
Events
| Event | Description |
|---|---|
oas-back | The back button was clicked |
Slots
| Name | Description |
|---|---|
| default | Body content (default slot, below the title row; not rendered when empty) |
avatar | Avatar (between the back button and the title block; compose with the oas-avatar component, not rendered when empty) |
back-icon | Icon slot for the back button; replaces the built-in chevron when present (empty comment nodes count as no content) |
breadcrumb | Breadcrumb in its own top row; compose with the oas-breadcrumb component (not rendered when empty) |
extra | Right-side action area |
footer | Bottom action area (not rendered when empty) |
subtitle | Rich subtitle content slot; overrides the subtitle attribute text when present |
title | Rich title content slot; overrides the title attribute text when present |
Slots: body content goes in the default slot; the breadcrumb / footer / content blocks are not rendered when empty; the title / subtitle / back-icon slots override the attribute text / built-in icon when present. The back button renders as a native <button aria-label="Back">.