Page header
Breadcrumb, title, description and actions, with a pin for the current route.
<script setup lang="ts">
import PageHeader from '@shared/components/common/PageHeader.vue'
import { Button } from '@shared/components/ui/button'
import { Plus } from 'lucide-vue-next'
</script>
<template>
<PageHeader title="Orders">
<template #description>
Everything customers have bought, newest first.
</template>
<template #actions>
<Button size="sm" variant="outline">
Export
</Button>
<Button size="sm">
<Plus class="size-4" />
New order
</Button>
</template>
</PageHeader>
</template>Usage
Every page layout renders this header, so a page rarely reaches for it directly. Use it on its own where you want the header without the body a layout imposes.
title is the convenience; the #title slot wins when both are given.
The pin
The pin toggles the current route in the pinned list, which is what fills the sidebar's Pinned section. It writes usePinnedPages, stores the route's name, path and title, and it is the title you pass that gets pinned, falling back to meta.title and then to the path.
The pin carries sa-no-print, so it never appears on a printed page.
The print button
A route flagged meta.printable gets a print button in the actions area, before your own.
Do not set it on a list page. DataTable's toolbar ships its own print, so a printable list page shows two. Keep it for the printables that are not tables: an invoice, a report, a detail page.
Examples
A composed title
<script setup lang="ts">
import PageHeader from '@shared/components/common/PageHeader.vue'
import { Badge } from '@shared/components/ui/badge'
</script>
<template>
<PageHeader>
<template #title>
<span class="flex items-center gap-2">
INV-2043
<Badge variant="secondary">Paid</Badge>
</span>
</template>
<template #description>
Issued 3 March 2026 to Northwind.
</template>
</PageHeader>
</template>API
Source: src/shared/components/common/PageHeader.vue
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The heading. The #title slot wins over it. |
Emits
None.
Slots
| Slot | Description |
|---|---|
breadcrumb | Above the title. Usually SmartBreadcrumb. |
title | Replaces title. |
description | Under the title, in muted text. |
actions | At the end of the header row, after the print button if there is one. |
Accessibility
- The title is the page's
<h1>. - The pin is named "Pin this page" or "Unpin this page" as its state changes.
- The header stacks on a phone and becomes a row from the
smbreakpoint, so the actions never crush the title.