Page Header

Standardises page titles across the app — breadcrumbs above, title + action buttons in a row, optional description, and a bottom divider.

ExamplesCodeUsageChangelog

Basic

Equipment

---

Tailwind v4

<PageHeader title="Equipment" />

With actions

Equipment

---

Tailwind v4

<PageHeader title="Equipment">
  <template #actions>
    <Button variant="secondary">Export</Button>
    <Button>Add Equipment</Button>
  </template>
</PageHeader>

With breadcrumbs

1. Equipment
2. Crusher #1

Crusher #1

---

Tailwind v4

<PageHeader title="Crusher #1">
  <template #breadcrumbs>
    <Breadcrumb :items="[{ label: 'Equipment', href: '/equipment' }, { label: 'Crusher #1' }]" />
  </template>
  <template #actions>
    <Button variant="secondary">Edit</Button>
  </template>
</PageHeader>

With description

Shift Reports

Daily production summaries for all active shifts. Data updates every 15 minutes.

---

Tailwind v4

<PageHeader
  title="Shift Reports"
  description="Daily production summaries for all active shifts."
>
  <template #actions>
    <Button>New Report</Button>
  </template>
</PageHeader>

Props

Prop	Type	Default	Description
title	string	—	Required. Page heading
description	string	—	Optional subtitle below the title

Slots

Slot	Description
breadcrumbs	Navigation context above the title
actions	Buttons or controls aligned to the right of the title
tabs	Navigation tabs below the description