Page Header
A header section at the top of a page's content with a title, description, actions, breadcrumb, and navigation
<sa-page-header>
<sa-page-header-title>Flight Reservations</sa-page-header-title>
<sa-page-header-description>
Manage flight bookings, fare classes, and seat inventory across all Voyager Travel routes.
</sa-page-header-description>
<sa-page-header-actions>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="download"/>
Export
</sa-button>
<sa-button>
<sa-icon name="plus"/>
New reservation
</sa-button>
</sa-page-header-actions>
</sa-page-header>Usage
The <sa-page-header> sits at the top of a page's content — typically as the first child of an <sa-page-container>. Compose it from an optional <sa-breadcrumb>, <sa-page-header-title>, <sa-page-header-description>, <sa-page-header-actions>, and <sa-page-header-nav> — in that order, which is also the top-to-bottom order on narrow viewports.
<sa-page-header>
<sa-breadcrumb>...</sa-breadcrumb>
<sa-page-header-title>Bookings</sa-page-header-title>
<sa-page-header-description>All bookings across destinations.</sa-page-header-description>
<sa-page-header-actions>
<sa-button>...</sa-button>
</sa-page-header-actions>
<sa-page-header-nav>...</sa-page-header-nav>
</sa-page-header>Examples
Title and actions
The actions area is aligned to the end of the title row on regular viewports and moves below the title and description on narrow viewports.
<sa-page-header>
<sa-page-header-title>Destinations</sa-page-header-title>
<sa-page-header-actions>
<sa-button>
<sa-icon name="plus"/>
Add destination
</sa-button>
</sa-page-header-actions>
</sa-page-header>With breadcrumb
Place an <sa-breadcrumb> before the title to show the page's location in the application.
<sa-page-header>
<sa-breadcrumb>
<sa-breadcrumb-list>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Operations</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Flights</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-page>Flight Reservations</sa-breadcrumb-page>
</sa-breadcrumb-list>
</sa-breadcrumb>
<sa-page-header-title>Flight Reservations</sa-page-header-title>
<sa-page-header-description>
Manage flight bookings, fare classes, and seat inventory across all Voyager Travel routes.
</sa-page-header-description>
<sa-page-header-actions>
<sa-button>
<sa-icon name="plus"/>
New reservation
</sa-button>
</sa-page-header-actions>
</sa-page-header>With navigation
Use <sa-page-header-nav> for a full-width navigation area at the bottom of the header — typically an <sa-tab-list>.
<sa-page-header>
<sa-page-header-title>Hotel Partners</sa-page-header-title>
<sa-page-header-description>
Partner hotels, contracted rates, and seasonal availability.
</sa-page-header-description>
<sa-page-header-actions>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="plus"/>
Add partner
</sa-button>
</sa-page-header-actions>
<sa-page-header-nav aria-label="Page sections">
<sa-tab-list variant="TabListVariant.Line">
<sa-tab-link is-active="true" href="#">Overview</sa-tab-link>
<sa-tab-link href="#">
Contracts
<sa-badge variant="BadgeVariant.Secondary">36</sa-badge>
</sa-tab-link>
<sa-tab-link href="#">Rate plans</sa-tab-link>
<sa-tab-link href="#">Settings</sa-tab-link>
</sa-tab-list>
</sa-page-header-nav>
</sa-page-header>Title badge
Inline trailing content such as an <sa-badge> can be placed directly after the title text.
<sa-page-header>
<sa-page-header-title class="flex flex-wrap items-center gap-x-2.5 gap-y-1">
Trans-Pacific Charters
<sa-badge variant="BadgeVariant.Secondary">Peak season</sa-badge>
</sa-page-header-title>
<sa-page-header-description>
Seasonal charter rotations across Auckland, Papeete, and Honolulu.
</sa-page-header-description>
<sa-page-header-actions>
<sa-button>Review allocations</sa-button>
</sa-page-header-actions>
</sa-page-header>Full page
A page header composed with a sidebar, app header, and page container into a complete page layout.
<sa-sidebar-wrapper>
<sa-sidebar>
<sa-sidebar-header>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#" size="SidebarMenuLinkSize.Large">
<div
class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<sa-icon name="compass"/>
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Voyager Travel</span>
<span class="truncate text-xs text-muted-foreground">Admin Console</span>
</div>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-header>
<sa-sidebar-content>
<sa-sidebar-group>
<sa-sidebar-group-label>Operations</sa-sidebar-group-label>
<sa-sidebar-group-content>
<sa-sidebar-menu>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="layout-dashboard"/>
<span>Dashboard</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="plane"/>
<span>Flights</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="map-pinned"/>
<span>Destinations</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
<sa-sidebar-menu-item>
<sa-sidebar-menu-link href="#">
<sa-icon name="users"/>
<span>Customers</span>
</sa-sidebar-menu-link>
</sa-sidebar-menu-item>
</sa-sidebar-menu>
</sa-sidebar-group-content>
</sa-sidebar-group>
</sa-sidebar-content>
</sa-sidebar>
<sa-sidebar-inset>
<sa-app-header>
<sa-sidebar-trigger></sa-sidebar-trigger>
<sa-app-header-separator/>
<span class="text-sm font-medium">Voyager Travel</span>
<sa-app-header-actions>
<sa-button variant="ButtonVariant.Ghost" size="ButtonSize.IconSmall" aria-label="Notifications">
<sa-icon name="bell"/>
</sa-button>
<sa-avatar name="Amelia Hart"/>
</sa-app-header-actions>
</sa-app-header>
<sa-page-container>
<sa-page-header>
<sa-breadcrumb>
<sa-breadcrumb-list>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Operations</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-item>
<sa-breadcrumb-link href="#">Flights</sa-breadcrumb-link>
</sa-breadcrumb-item>
<sa-breadcrumb-separator/>
<sa-breadcrumb-page>Flight Reservations</sa-breadcrumb-page>
</sa-breadcrumb-list>
</sa-breadcrumb>
<sa-page-header-title class="flex flex-wrap items-center gap-x-2.5 gap-y-1">
Flight Reservations
<sa-badge variant="BadgeVariant.Secondary">Peak season</sa-badge>
</sa-page-header-title>
<sa-page-header-description>
Manage flight bookings, fare classes, and seat inventory across all Voyager Travel routes.
</sa-page-header-description>
<sa-page-header-actions>
<sa-button variant="ButtonVariant.Outline">
<sa-icon name="download"/>
Export
</sa-button>
<sa-button>
<sa-icon name="plus"/>
New reservation
</sa-button>
</sa-page-header-actions>
<sa-page-header-nav aria-label="Page sections">
<sa-tab-list variant="TabListVariant.Line">
<sa-tab-link is-active="true" href="#">Overview</sa-tab-link>
<sa-tab-link href="#">
Reservations
<sa-badge variant="BadgeVariant.Secondary">128</sa-badge>
</sa-tab-link>
<sa-tab-link href="#">Payments</sa-tab-link>
<sa-tab-link href="#">Settings</sa-tab-link>
</sa-tab-list>
</sa-page-header-nav>
</sa-page-header>
<div class="grid gap-4 md:grid-cols-3">
<sa-card>
<sa-card-header>
<sa-card-description>Reservations today</sa-card-description>
<sa-card-title class="text-2xl tabular-nums">1,284</sa-card-title>
</sa-card-header>
</sa-card>
<sa-card>
<sa-card-header>
<sa-card-description>Seats sold</sa-card-description>
<sa-card-title class="text-2xl tabular-nums">87.4%</sa-card-title>
</sa-card-header>
</sa-card>
<sa-card>
<sa-card-header>
<sa-card-description>Revenue (MTD)</sa-card-description>
<sa-card-title class="text-2xl tabular-nums">$2.31M</sa-card-title>
</sa-card-header>
</sa-card>
</div>
</sa-page-container>
</sa-sidebar-inset>
</sa-sidebar-wrapper>API Reference
<sa-page-header>
The <sa-page-header> tag helper renders a <header> element at the top of a
page's content. It has no attributes of its own; it forwards any standard
global HTML
attributes
(such as id or class) to the rendered element.
<sa-page-header-title>
The <sa-page-header-title> tag helper renders the page title as the page's
<h1> element. It has no attributes of its own; it forwards any global HTML
attributes to the rendered element.
<sa-page-header-description>
The <sa-page-header-description> tag helper renders a short description
below the title as a <p> element. It has no attributes of its own; it
forwards any global HTML attributes to the rendered element.
<sa-page-header-actions>
The <sa-page-header-actions> tag helper renders a <div> element for
content such as buttons, aligned to the end of the title row on regular
viewports and placed below the title and description on narrow viewports. It
has no attributes of its own; it forwards any global HTML attributes to the
rendered element.
<sa-page-header-nav>
The <sa-page-header-nav> tag helper renders a full-width <nav> element at
the bottom of the header. It positions whatever navigation the page provides
without imposing any styling of its own. It has no attributes of its own; it
forwards any global HTML attributes to the rendered element.