Page Header
A header section at the top of a page's content with a title, description, actions, breadcrumb, and navigation
Theme
<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
Sits at the top of a page's content to display a page title, actions, as well as navigation.
<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.
Theme
<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.
Theme
<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>.
Theme
<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.
Theme
<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.
Theme
<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>
Renders a <header> element at the top of a page's content.
<sa-page-header-title>
Renders the page title as the page's <h1> element.
<sa-page-header-description>
Renders a short description below the title as a <p> element.
<sa-page-header-actions>
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.
<sa-page-header-nav>
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.