# Page heading blocks The strip at the top of an app page: the title, where you are, and what you can do here. Each block is one `.svelte` file built from `SvButton`, `SvMenu`, `SvBreadcrumb`, `SvTabs`, `SvBadge`, `SvSegmented` and `SvStat`, with a little placeholder content underneath so it reads as the top of a page. ## Installation Add the whole group, or one block by its name (shown under each demo):

See them first with `npx @svgrid/ui try blocks/page-headings`. No project needed. ## With breadcrumbs A release page three levels deep: an `SvBreadcrumb` trail above the title, a status badge, and Edit notes / Publish release. On a phone the trail is replaced by one "Back to Releases" link that points at the parent crumb. Publishing flips the badge from In review to Live. > Live demo: Page heading with breadcrumbs block - https://svgrid.com/demos/546-block-page-headings-breadcrumbs/ `npx @svgrid/ui add page-headings-breadcrumbs` ## With tabs A project heading with Invite and Run sync, and an `SvTabs` strip underneath: Overview, Activity and Settings. The counts are part of the tab labels and come from state, so Run sync adds an activity entry, raises the count and switches to the Activity tab. Settings holds a name field and a switch. > Live demo: Page heading with tabs block - https://svgrid.com/demos/547-block-page-headings-tabs/ `npx @svgrid/ui add page-headings-tabs` ## With meta A record heading, shown on a job posting: title and status badge, then a wrapping row of icon + text items for location, salary, closing date and hiring manager. The Status menu moves the posting between Open, Paused and Closed; the badge follows, and a closed posting disables View applicants. > Live demo: Page heading with meta block - https://svgrid.com/demos/548-block-page-headings-meta/ `npx @svgrid/ui add page-headings-meta` ## With stats A dashboard heading with an `SvSegmented` range switch (7d, 30d, 90d) and a Download report button, above four `SvStat` values with deltas and a small bar strip. Changing the range swaps every number. Refund rate sets `invert`, so a drop shows green. > Live demo: Page heading with stats block - https://svgrid.com/demos/549-block-page-headings-stats/ `npx @svgrid/ui add page-headings-stats` ## One heading for every page in a SvelteKit app The blocks hard-code their title and buttons. To share one heading across a section of your app, turn the strip into a component that takes them as props. The actions become a `Snippet`, so each page passes real buttons, not data. The class names are the ones the breadcrumbs block uses, so its `