PAGE HEADER: Composable page-level header with optional rows.
COMPOSES: Breadcrumb | Tabs | Buttons | Typography
The page header provides a consistent top section for every page. All rows are optional
except .page-header-main. Combine breadcrumbs, back navigation, title + subtitle,
action buttons, a generic slot, and tabs as needed.
Minimal: Back arrow, page title, and a subtitle on the same line. The simplest useful configuration.
<div class="tw-page-header"><div class="tw-page-header-main"><a class="tw-page-header-back">...</a><div class="tw-page-header-title-group"><h1 class="tw-page-header-title">...</h1><span class="tw-page-header-subtitle">...</span></div></div></div>
Actions: Add .page-header-actions to place buttons on the right side of the header.
<div class="tw-page-header-actions"><button class="tw-btn tw-btn-secondary">...</button></div>
Slot: Use .page-header-slot for arbitrary content below the main row
(e.g. filters, descriptions, badges).
<div class="tw-page-header-slot">...any content...</div>
Breadcrumbs: Add .page-header-breadcrumb above the main row to show the
user's location in the hierarchy.
<div class="tw-page-header-breadcrumb"><nav aria-label="Breadcrumb"><ol class="tw-breadcrumb">...</ol></nav></div>
Breadcrumbs + Actions: Common configuration for settings and detail pages where the user needs both context and available actions.
Combine .page-header-breadcrumb + .page-header-main + .page-header-actions
Full without tabs: Breadcrumbs, back, title, subtitle, actions, and a slot area below.
Combine all optional rows: .page-header-breadcrumb + .page-header-main + .page-header-slot
Tabs: Wrap the existing .tabs component inside .page-header-tabs.
The bottom border of the page header is automatically removed when tabs are present (via :has()).
<div class="tw-page-header-tabs"><div class="tw-tabs" role="tablist"><button class="tw-tab tw-active">...</button></div></div>
Breadcrumbs + Tabs: Breadcrumbs above the title row, tabs below. Both rows are independently optional.
Combine .page-header-breadcrumb + .page-header-main + .page-header-tabs
Full: All optional rows combined — breadcrumbs, back, title + subtitle, actions, and tabs. This is the maximum configuration.
All rows: .page-header-breadcrumb + .page-header-main (with .page-header-actions) + .page-header-tabs
No back: The back arrow is optional. Omit .page-header-back when
the page is a top-level destination (e.g. dashboard, home).
Showing data for the current academic year. Last updated 5 minutes ago.
Simply omit the <a class="tw-page-header-back"> element when no back navigation is needed.