AppPageHeader
The masthead every screen opens with — a title, an optional subtitle, and the page-level actions.
<app-page-header title="Projects" subtitle="…">…</app-page-header>Every screen opens the same way: a title telling the user where they are, sometimes a subtitle for context, and the page-level actions on the right. <app-page-header> owns that masthead so no two screens invent their own header markup.
Its look comes entirely from the shared @webority/theme, so the Razor <app-page-header> and the React <AppPageHeader> render identically — a page masthead is the same on every Webority surface.
Playground
Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the masthead above it.
Title only
The simplest masthead is just the page title — no subtitle, no actions.
Show code
<app-page-header title="Projects"></app-page-header>
app-page-header, at the top. It answers "where am I?" — section headings inside the page are a different job, handled by app-card titles.With a subtitle
A subtitle carries context the title can't — a count, a status, a one-line description.
Show code
<app-page-header title="Projects" subtitle="12 active projects"></app-page-header>
With actions
The actions slot puts page-level controls on the right of the masthead — usually the primary action for the whole screen.
Show code
<app-page-header title="Projects" subtitle="12 active projects">
<app-button left-icon="plus">New project</app-button>
</app-page-header>
Eyebrow and a leading icon
An eyebrow is a small kicker above the title; a leading icon gives the masthead an identity. A non-primary tone tints both.
Show code
<app-page-header eyebrow="Workspace" icon="folder" tone="info" title="Projects" subtitle="12 active projects"></app-page-header>
Breadcrumbs and inline status
Breadcrumbs sit in their own row above the masthead; a status slot sits inline beside the title.
Show code
<app-page-header title="Apollo" subtitle="Server migration · last saved 2h ago">
<app-page-header-breadcrumbs>…</app-page-header-breadcrumbs>
<app-page-header-status><app-status-badge tone="success" label="Active" /></app-page-header-status>
<app-button>Edit</app-button>
</app-page-header>
Size, alignment and divider
A size scale for density, centre alignment for empty-state and wizard mastheads, an optional divider, and a sticky mode that pins the header on scroll.
Show code
<app-page-header size="lg" divider="true" title="Dashboard" subtitle="Everything at a glance"></app-page-header>
Show code
<app-page-header align="center" icon="zap" title="Welcome aboard" subtitle="Let's set up your first project"></app-page-header>
sticky="true" to pin the header to the top of its scroll container — handy on a long form or table where the title and primary action should stay reachable.When to use
Use it when
- A screen needs its standard title-and-actions masthead at the top.
- The page has a single primary action that applies to everything below it.
- You want a subtitle to show a count, status, or one-line description.
Reach for something else when
- You are titling a section inside the page, not the page itself. → AppCard title
- You need to switch between peer views of the page. → AppTabs
- The message is transient feedback, not a heading. → AppAlert
Best practices
Every option
The whole surface of the component, one cell per value.
tone — all five (tints the icon tile + eyebrow)
tone="primary"
tone="success"
tone="warning"
tone="danger"
tone="info"
size — sm · md · lg
size="sm"
size="md"
size="lg"
align — start vs center
align="start" (default)
align="center"
state — divider · sticky
(default)divider="true"sticky="true" (position: sticky — scroll a real page to see it hold)divider="true" sticky="true"icon — name vs node
icon="users" — resolved by namenode — React-only; Razor's icon attribute takes a name string only(no icon)slots — status · breadcrumbs · actions
status only
breadcrumbs only
actions only
all three together
edge cases
tone without icon — tints only the eyebrow
long title overflow — masthead does not break layout
many actions — a pile of equal-weight buttons crowds the row
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| title * | string | — | The page title — the main heading of the masthead. |
| as | h1 | h2 | h3 | h4 | h5 | h6 | h1 | The heading element the title renders as. Keep one h1 per page. |
| subtitle | string | — | A secondary line under the title: a count, status, or short description. |
| eyebrow | string | — | A small kicker label above the title — the section or category. |
| icon | string | — | A leading Bootstrap Icons glyph name, in a tone-tinted tile. |
| tone | primary | success | warning | danger | info | primary | Tints the icon tile and the eyebrow. |
| size | sm | md | lg | md | The title / spacing scale. |
| align | start | center | start | Centre the masthead — for empty states and wizards. |
| divider | bool | false | A hairline border under the masthead. |
| sticky | bool | false | Pin the masthead to the top of its scroll container. |
| app-page-header-breadcrumbs | slot | — | A breadcrumbs row above the masthead — usually app-breadcrumbs. |
| app-page-header-status | slot | — | An inline status pill beside the title — usually app-status-badge. |
| (content) | markup | — | Right-aligned page-level actions — usually an app-button. Rendered as the trailing slot. |