Page header
The top of an application page; breadcrumbs, title, description, actions, tab links.
Last updated
Oakmere
Customer since March 2024.
Show codeHide code
<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
npx @ava-ui/apogee add page-headerAPI
| 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
Customers
Everyone with an account.
Oakmere
Show codeHide code
<PageHeader heading="Customers" />
<PageHeader layout="with-tabs" heading="Oakmere" tabs={[{ label, href, active? }]} />Accessibility
- Renders a
headerlabelled by the title; tabs are anavof links witharia-current="page"on the active one.