// Generated by scripts/generate-showcase.mjs. Do not edit directly. page PageHeaderDetail { layout = "showcase" state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? "" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Page Header example" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default page header for a modern application." state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_id = ctx.url.searchParams.get("pg_id") ?? "page-title" state playground_align = ctx.url.searchParams.get("pg_align") ?? "start" state playground_centered = (ctx.url.searchParams.get("pg_centered") ?? "false") === "true" state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full" state playground_showBreadcrumbs = (ctx.url.searchParams.get("pg_showBreadcrumbs") ?? "true") === "true" state playground_breadcrumbs = JSON.parse(ctx.url.searchParams.get("pg_breadcrumbs") ?? "[{\"label\":\"Home\",\"href\":\"/\",\"icon\":\"icon-[lucide--house]\"},{\"label\":\"Components\",\"href\":\"/base\"},{\"label\":\"Page header\",\"current\":true}]") state playground_breadcrumbParent = ctx.url.searchParams.get("pg_breadcrumbParent") ?? "" state playground_breadcrumbParentHref = ctx.url.searchParams.get("pg_breadcrumbParentHref") ?? "#page-header-demo" state playground_breadcrumbCurrent = ctx.url.searchParams.get("pg_breadcrumbCurrent") ?? "" state playground_primaryLabel = ctx.url.searchParams.get("pg_primaryLabel") ?? "Page Header" state playground_primaryHref = ctx.url.searchParams.get("pg_primaryHref") ?? "#page-header-demo" state playground_primaryIcon = ctx.url.searchParams.get("pg_primaryIcon") ?? "" state playground_secondaryLabel = ctx.url.searchParams.get("pg_secondaryLabel") ?? "Page Header" state playground_secondaryHref = ctx.url.searchParams.get("pg_secondaryHref") ?? "#page-header-demo" state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? "" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_borderBottom = (ctx.url.searchParams.get("pg_borderBottom") ?? "true") === "true" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Page Header" description = "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions." } view {
Marketing component

Page Header

Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.

25 props3 slots0 outputsTheme readyResponsive
Interactive playground

Configure Page Header

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<PageHeader
  title="Page Header example"
  description="A polished default page header for a modern application."
  align="start"
  showBreadcrumbs="true"
  breadcrumbs='[
    {
      "id": "page-header-0-1",
      "key": "page-header-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#page-header-demo",
      "actionHref": "#page-header-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "page-header-0-2",
      "key": "page-header-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#page-header-demo",
      "actionHref": "#page-header-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  breadcrumbParentHref="#page-header-demo"
  primaryLabel="Page Header"
  primaryHref="#page-header-demo"
  secondaryLabel="Page Header"
  secondaryHref="#page-header-demo">
  <div data-slot="meta">
    <div class="showcase-slot">meta slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</PageHeader>
Component props25 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Page header with actions

Introduce a service or documentation page with breadcrumbs and clear actions.

01
Live preview
Component usage.wrn
<PageHeader
  eyebrow="Component showcase"
  title="Page headers with clear hierarchy"
  description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information."
  icon="icon-[lucide--panel-top]"
  align="start"
  maxWidth="full"
  showBreadcrumbs="true"
  breadcrumbs='[
    {
      "label": "Home",
      "href": "/",
      "icon": "icon-[lucide--house]"
    },
    {
      "label": "Components",
      "href": "/base"
    },
    {
      "label": "Page header",
      "current": true
    }
  ]'
  breadcrumbParentHref="#page-header-demo"
  primaryLabel="Primary action"
  primaryHref="#primary"
  primaryIcon="icon-[lucide--arrow-down]"
  secondaryLabel="Secondary action"
  secondaryHref="#secondary"
  secondaryIcon="icon-[lucide--house]">
  <div data-slot="meta">
    <div class="showcase-slot">meta slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</PageHeader>
Compact

Compact service header

Use reduced spacing when a page already sits inside an application shell.

02
Live preview
Component usage.wrn
<PageHeader
  eyebrow="Citizen service"
  title="Track a complaint"
  description="Check the latest status using your complaint reference."
  icon="icon-[lucide--scan-search]"
  align="center"
  compact="true"
  size="sm"
  showBreadcrumbs="true"
  breadcrumbs='[
    {
      "id": "page-header-1-1",
      "key": "page-header-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#page-header-demo",
      "actionHref": "#page-header-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "page-header-1-2",
      "key": "page-header-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#page-header-demo",
      "actionHref": "#page-header-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  breadcrumbParentHref="#page-header-demo"
  primaryLabel="Track status"
  primaryHref="#track"
  secondaryLabel="Compact example"
  secondaryHref="#page-header-demo"
  variant="soft">
  <div data-slot="meta">
    <div class="showcase-slot">meta slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</PageHeader>
Advanced

Centered campaign header

Use a centered header for campaigns, guides, and high-level public information.

03
Live preview
Component usage.wrn
<PageHeader
  eyebrow="Safety guide"
  title="Prepare your family for emergencies"
  description="Practical guidance for creating a plan, preparing supplies, and staying informed."
  icon="icon-[lucide--trash-2]"
  align="center"
  centered="true"
  size="lg"
  maxWidth="wide"
  showBreadcrumbs="true"
  breadcrumbs='[
    {
      "id": "page-header-2-1",
      "key": "page-header-2-1",
      "value": "primary",
      "label": "Advanced workflow",
      "title": "Advanced workflow",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "A configurable sample message.",
      "href": "#page-header-demo",
      "actionHref": "#page-header-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 32,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    },
    {
      "id": "page-header-2-2",
      "key": "page-header-2-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "Another configurable message.",
      "href": "#page-header-demo",
      "actionHref": "#page-header-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": true,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 64,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    }
  ]'
  breadcrumbParentHref="#page-header-demo"
  primaryLabel="Advanced example"
  primaryHref="#page-header-demo"
  secondaryLabel="Advanced example"
  secondaryHref="#page-header-demo"
  variant="minimal">
  <div data-slot="meta">
    <div class="showcase-slot">meta slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</PageHeader>
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
eyebrowstring""No
titlestring""No
descriptionstring""No
iconstring""No
idstring"page-title"No
alignstring"left"No
centeredbooleanfalseNo
compactbooleanfalseNo
sizestring"default"No
maxWidthstring"xl"No
showBreadcrumbsbooleanfalseNo
breadcrumbsunknown[][]No
breadcrumbParentstring""No
breadcrumbParentHrefstring""No
breadcrumbCurrentstring""No
primaryLabelstring""No
primaryHrefstring""No
primaryIconstring""No
secondaryLabelstring""No
secondaryHrefstring""No
secondaryIconstring""No
colorstring"primary"No
variantstring"default"No
borderBottombooleantrueNo
classstring""No
} }