Page header
Shows the breadcrumb, the title, a short description, and the action buttons on the right together at the very top of the page. It gives list, form, and detail pages the same top layout.
Basic usage
title is required and is rendered as the page's h1 heading, so use it once per page. description adds a one-line description below the title.
<acun:page-header title="Orders" description="Shipping status of the 148 orders from the Kadıköy warehouse." />| Prop | Values |
|---|---|
title | Page title |
description | Description below the title |
Actions
The actions slot sits to the right of the title; put the page's main action last. When there is not enough room, the actions move below the title.
<acun:page-header title="Orders" description="Shipping status of the 148 orders from the Kadıköy warehouse.">
<acun:slot:actions>
<acun:button variant="white">Export to Excel</acun:button>
<acun:button>New order</acun:button>
</acun:slot:actions>
</acun:page-header>| Prop | Values |
|---|---|
actions | Slot; right of the title |
Breadcrumbs
When breadcrumbs is given, an acun:breadcrumb is rendered above the title; items take a label and a url or route. A home icon is added at the start automatically, and the last item is shown without a link, as the current page. Change where the icon leads with home-route (route name) or home-url (URL); if the route is not defined, it leads to the site root.
<acun:page-header
title="Ayşe Yılmaz"
description="CUS-10482 · Business customer"
home-url="#"
:breadcrumbs="[
['label' => 'Customers', 'url' => '#musteriler'],
['label' => 'Business', 'url' => '#kurumsal'],
['label' => 'Ayşe Yılmaz'],
]"
/>| Prop | Values |
|---|---|
breadcrumbs | [['label' => …, 'url' | 'route' => …], …] |
home-route | Route name |
home-url | URL |
Additional content
The default slot is shown below the description; use it for page tabs or filter buttons. This example uses breadcrumbs, actions, and filters together.
<acun:page-header
title="Shipments"
description="September 2026 shipments"
home-url="#"
:breadcrumbs="[['label' => 'Reports', 'url' => '#raporlar'], ['label' => 'Shipments']]"
>
<acun:slot:actions>
<acun:button>Create report</acun:button>
</acun:slot:actions>
<div class="flex flex-wrap gap-2">
<acun:button size="sm" variant="soft">All · 3,320</acun:button>
<acun:button size="sm" variant="ghost">Delivered · 3,106</acun:button>
<acun:button size="sm" variant="ghost">Not delivered · 214</acun:button>
</div>
</acun:page-header>| Prop | Values |
|---|---|
default slot | Below the description (tabs, filters) |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
title | — | Required; the page title (h1) |
description | null | Description below the title |
breadcrumbs | [] | acun:breadcrumb items; if empty, no breadcrumb is rendered |
home-route | dashboard | Route name for the home icon; if it is not defined, the site root |
home-url | null | Direct URL for the home icon; when given, home-route is not used |