--- meta: title: Page description: Pages combine a header with tabbed content. layout: component --- ```html:preview

UI Examples

Overview Content

Tab One Content

Tab Two Content

``` ## Examples ### Header Actions Use `slot="actions"` to place controls in the page header action area. ```html:preview

Export

New Customer

Customer overview content

Active customer content

Archived customer content

``` ### Header Metadata `zn-page` supports the same header metadata attributes as `zn-header`: `full-location`, `entity-id`, `entity-id-show`, `previous-path`, and `previous-target`. ```html:preview

Overview content

``` ### Breadcrumbs Breadcrumb links can be passed with `slot="breadcrumb"` and will be forwarded to the underlying header. ```html:preview Accounts Acme Inc

Profile content

Security content

``` ### Overview Content Use a normal `zn-tab` for overview content. An Overview tab without an explicit `id` uses the default empty tab id. `zn-page` leaves tab elements in the page light DOM and projects them into internal tab panels, so scoped styles from the original DOM context continue to apply. Tabs render in the order they appear in the page by default. Tabs with an empty id are shown first. Set `priority` on `zn-tab` to order the remaining tabs without changing their DOM position. ```html:preview

This summary appears in the Overview tab.

Activity content

Files content

``` ### Tab Priority Use `priority` to control tab order. Lower numbers appear first after the empty-id overview tab. ```html:preview

Later content

Second content

Overview content

First content

``` ### Dynamic Tabs Set `uri` on `zn-tab` to create a dynamic tab. The generated navigation item receives `tab-uri`. ```html:preview

Report overview content

```