Photonix

PageHeader

A premium header for top-level pages that organizes navigation, titles, and actions.

Preview

Usage
import { PageHeader, Button } from '@photonix/ultimate';
import { AddOutline } from '@photonix/icons';

<PageHeader
  title="Dashboard"
  showBackButton
  breadcrumbs={[
    { label: 'Home', href: '/' },
    { label: 'Overview' }
  ]}
  actions={
    <Button variant="primary" leadingIcon={<AddOutline />}>
        Create New
    </Button>
  }
/>

Component API

PageHeader

Prop
Type
Default
Description
breadcrumbs
BreadcrumbItemData[]
[]
Breadcrumb items for navigation trail
maxBreadcrumbs
number
4
Maximum number of visible breadcrumb items before collapsing
title
string
-
Page title
showBackButton
boolean
false
Show back button before title
onBack
(() => void)
-
Called when back button is clicked
actions
React.ReactNode
-
Action buttons to display on the right side
preserveActionsSpace
boolean
true
Preserve actions slot space even when no actions are provided to avoid layout shifts between pages/tabs.
actionsReserveBlockSize
string | number
"var(--dimensions-48)"
Reserved block size for the actions row. Defaults to the largest built-in Button height so small/medium/large actions share one stable header height.
actionsReserveInlineSize
string | number
-
Optional reserved inline size for the actions slot. Use this when swapping between pages/tabs where some states have no actions but title wrapping must stay identical.
onBreadcrumbClick
((e: React.MouseEvent, item: BreadcrumbItemData) => void)
-
Callback when a breadcrumb item is clicked
onBreadcrumbSelect
((value: string) => void)
-
Callback when a hidden breadcrumb item (in ellipsis dropdown) is selected
sticky
boolean
false
Whether the header is sticky (position sticky with shadow when stuck)
className
string
-
Additional CSS class

Variants

Basic Title

The simplest form of PageHeader with just a title.

Getting Started

Basic Title
<PageHeader title="Getting Started" />

With Breadcrumbs

Displays a navigation trail above the title.

With Breadcrumbs
<PageHeader 
  title="Project Settings" 
  breadcrumbs={[
    { label: 'Organization', href: '#' },
    { label: 'Projects', href: '#' },
    { label: 'Photonix' }
  ]} 
/>

With Back Button

Includes a back navigation button before the title.

Update Profile

With Back Button
<PageHeader 
  title="Update Profile" 
  showBackButton 
  onBack={() => console.log('Back clicked')} 
/>

With Actions

Multiple action buttons can be placed on the right side.

User Management

With Actions
<PageHeader 
  title="User Management"
  actions={
    <Flex gap="xs">
      <Button variant="secondary" size="small">Export CSV</Button>
      <Button variant="primary" size="small" leadingIcon={<Add />}>Add User</Button>
    </Flex>
  }
/>

Sticky Header

A sticky header that stays at the top of its container and adds elevation on scroll.

Sticky Resource

Scroll down to see the sticky header transition. When it hits the top, it will show a divider and shadow to indicate it's stuck. Photonix components are designed to provide clear visual feedback.

Scroll down to see the sticky header transition. When it hits the top, it will show a divider and shadow to indicate it's stuck. Photonix components are designed to provide clear visual feedback.

Scroll down to see the sticky header transition. When it hits the top, it will show a divider and shadow to indicate it's stuck. Photonix components are designed to provide clear visual feedback.

Scroll down to see the sticky header transition. When it hits the top, it will show a divider and shadow to indicate it's stuck. Photonix components are designed to provide clear visual feedback.

Scroll down to see the sticky header transition. When it hits the top, it will show a divider and shadow to indicate it's stuck. Photonix components are designed to provide clear visual feedback.

Scroll down to see the sticky header transition. When it hits the top, it will show a divider and shadow to indicate it's stuck. Photonix components are designed to provide clear visual feedback.

Scroll down to see the sticky header transition. When it hits the top, it will show a divider and shadow to indicate it's stuck. Photonix components are designed to provide clear visual feedback.

Scroll down to see the sticky header transition. When it hits the top, it will show a divider and shadow to indicate it's stuck. Photonix components are designed to provide clear visual feedback.

Scroll down to see the sticky header transition. When it hits the top, it will show a divider and shadow to indicate it's stuck. Photonix components are designed to provide clear visual feedback.

Scroll down to see the sticky header transition. When it hits the top, it will show a divider and shadow to indicate it's stuck. Photonix components are designed to provide clear visual feedback.

Sticky Header
<Box style={{ height: '300px', overflow: 'auto', border: '1px solid var(--border-neutral-tertiary)' }}>
  <PageHeader 
    title="Sticky Resource" 
    sticky 
    breadcrumbs={sampleBreadcrumbs}
  />
  <Box p="md">
    {/* Long Content */}
  </Box>
</Box>

Long Content Handling

Titles and breadcrumbs will truncate gracefully when content overflows.

This is an extremely long page title that should definitely truncate with ellipsis

Long Content Handling
<PageHeader 
  title="This is an extremely long page title that should definitely truncate with ellipsis" 
  breadcrumbs={[
    { label: 'First Level', href: '#' },
    { label: 'Second Level', href: '#' },
    { label: 'Third Level', href: '#' },
    { label: 'Fourth Level', href: '#' },
    { label: 'Fifth Level' }
  ]}
  maxBreadcrumbs={4}
/>

On this page

Preview
Component API
Variants
Basic Title
With Breadcrumbs
With Back Button
With Actions
Sticky Header
Long Content
Photonix UI - React Components, Templates & Figma Design System