Page Header

<sl-page-header> | SlPageHeader
Since 1.0 stable

The page header is a top-anchored component that sits under the application header, it establishes the context of the screen and allows the user to understand where they are.

The page header component should be used in conjunction with the sl-page-content component.

Examples

Basic Usage

Review balances, recent activity, and any actions that need attention. 
<sl-page-header heading="Accounts overview">
  <div slot="sub-heading">
    Review balances, recent activity, and any actions that need attention.
  </div>
</sl-page-header>

Override Container Spacing With ::part(container)

Use the exposed container part when you want to change the component’s internal padding or gap from outside the shadow root.

This header uses default spacing.
This header uses tighter spacing by styling the exposed container part. 
<style>
  sl-page-header.default::part(container) {
    background-color: #dbeafe;
  }
  sl-page-header.compact::part(container) {
    padding: 16px 16px 0;
    gap: 16px;
    background-color: #fbdbed;
  }
</style>

<div style="display: flex; flex-direction: column; gap: 10px;">
  <sl-page-header class="default" heading="Default layout">
  <div slot="sub-heading">
    This header uses default spacing.
  </div>
</sl-page-header>

<sl-page-header class="compact" heading="Compact layout">
  <div slot="sub-heading">
    This header uses tighter spacing by styling the exposed container part.
  </div>
</sl-page-header>
  </div>

With Breadcrumbs

Home Investments Portfolio summary
View your investment portfolio and performance metrics.
 
<sl-page-header heading="Portfolio summary">
  <sl-breadcrumb slot="breadcrumbs">
    <sl-breadcrumb-item>Home</sl-breadcrumb-item>
    <sl-breadcrumb-item>Investments</sl-breadcrumb-item>
    <sl-breadcrumb-item>Portfolio summary</sl-breadcrumb-item>
  </sl-breadcrumb>
  <div slot="sub-heading">
    View your investment portfolio and performance metrics.
  </div>
</sl-page-header>

With Tabs

View reporting data and switch between report types.
Overview Performance Overview content Performance content 
<sl-page-header heading="Reports">
  <div slot="sub-heading">View reporting data and switch between report types.</div>

  <sl-tab-group slot="tabs">
    <sl-tab slot="nav" panel="overview">Overview</sl-tab>
    <sl-tab slot="nav" panel="performance">Performance</sl-tab>
    <sl-tab-panel name="overview">Overview content</sl-tab-panel>
    <sl-tab-panel name="performance">Performance content</sl-tab-panel>
  </sl-tab-group>
</sl-page-header>

Slots

Name Description
sub-heading Used for the page header sub-heading content.
heading Use this slot if your page heading needs to support HTML.
breadcrumbs Use this slot if breadcrumbs are required in the page header.
tabs Use this slot if tabs are required in the page header.

Learn more about using slots.

Properties

Name Description Reflects Type Default
heading The page heading. string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper.
container Main container.
heading The heading wrapper.
sub-heading The sub-heading wrapper.

Learn more about customizing CSS parts.