# Page header

> The top of an application page; breadcrumbs, title, description, actions, tab links.

URL: https://apogee.avaui.dev/docs/sections/page-header
Last updated: 2026-10-16

The top of an application page; breadcrumbs, title, description, actions, tab links.

Last updated October 16, 2026

```astro
<PageHeader layout="with-actions" breadcrumbs={[{ label, href? }]} heading="Oakmere" description="…">
<Button slot="actions" variant="outline" color="neutral">Export</Button>
<Button slot="actions">New invoice</Button>
</PageHeader>
```

## Add

```sh
npx @ava-ui/apogee add page-header
```

## API

| Prop | Type | Default | Category | Description |
| --- | --- | --- | --- | --- |
| `breadcrumbs` | `{ label, href? }[]` | — | content |  |
| `heading` | `string` | — | content | Required. |
| `description` | `string` | — | content |  |
| `tabs` | `{ label, href, active? }[]` | `[]` | content | Links under the title in `with-tabs`. |
| `actions` slot |  |  | content | Buttons on the end side, in any layout (`with-tabs` keeps them above the tabs). |
| `tabsLabel` | `string` | `'Page sections'` | content | Name of the tabs nav. |
| `layout` | `'simple' \| 'with-actions' \| 'with-tabs'` | `'simple'` | layout |  |
| `spacing`, `headingLevel`, `id` |  | `spacing` is `small`, `headingLevel` is `1` | layout |  |

## Layouts

```astro
<PageHeader heading="Customers" />
<PageHeader layout="with-tabs" heading="Oakmere" tabs={[{ label, href, active? }]} />
```

## Accessibility

-   Renders a `header` labelled by the title; tabs are a `nav` of links with `aria-current="page"` on the active one.