Photonix UI - React Components, Templates & Figma Design System

PageHeader

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

Preview

Usage

"use client";

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

const sampleBreadcrumbs = [
    { label: 'Home', href: '#' },
    { label: 'Products', href: '#' },
    { label: 'Cloud Services', href: '#' },
    { label: 'Compute' },
];

export default function PageHeaderBasicExample() {
    return (
        <Box w="100%" border="1px dashed var(--border-neutral-tertiary)" borderRadius="2xs">
            <PageHeader
                title="Cloud Infrastructure"
                showBackButton
                breadcrumbs={sampleBreadcrumbs}
                actions={
                    <Flex gap="xs">
                        <Button variant="secondary" size="small">Export</Button>
                        <Button variant="primary" size="small" leadingIcon={<AddOutline />}>Create Instance</Button>
                    </Flex>
                }
            />
        </Box>
    );
}

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.

Basic Title

"use client";

import { PageHeader } from '@photonix/ultimate';

export default function PageHeaderVariantBasicExample() {
    return <PageHeader title="Getting Started" />;
}

With Breadcrumbs

Displays a navigation trail above the title.

With Breadcrumbs

"use client";

import { PageHeader } from '@photonix/ultimate';

export default function PageHeaderVariantBreadcrumbsExample() {
    return (
        <PageHeader
            title="Project Settings"
            breadcrumbs={[
                { label: 'Organization', href: '#' },
                { label: 'Projects', href: '#' },
                { label: 'Photonix' },
            ]}
        />
    );
}

With Back Button

Includes a back navigation button before the title.

With Back Button

"use client";

import { PageHeader } from '@photonix/ultimate';

export default function PageHeaderVariantBackButtonExample() {
    return <PageHeader title="Update Profile" showBackButton onBack={() => {}} />;
}

With Actions

Multiple action buttons can be placed on the right side.

With Actions

"use client";

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

export default function PageHeaderVariantActionsExample() {
    return (
        <PageHeader
            title="User Management"
            actions={
                <Flex gap="xs">
                    <Button variant="secondary" size="small">Export CSV</Button>
                    <Button variant="primary" size="small" leadingIcon={<AddOutline />}>Add User</Button>
                </Flex>
            }
        />
    );
}

Sticky Header

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

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

"use client";

import { Box, PageHeader, Text } from '@photonix/ultimate';

const sampleBreadcrumbs = [
    { label: 'Home', href: '#' },
    { label: 'Products', href: '#' },
    { label: 'Cloud Services', href: '#' },
    { label: 'Compute' },
];

export default function PageHeaderVariantStickyExample() {
    return (
        <Box h={300} overflow="auto" border="1px solid var(--border-neutral-tertiary)" borderRadius="2xs" bg="tertiary">
            <PageHeader title="Sticky Resource" sticky breadcrumbs={sampleBreadcrumbs} />
            <Box p="md">
                {Array.from({ length: 10 }).map((_, i) => (
                    <Text key={i} as="p" color="secondary" style={{ marginBottom: '16px' }}>
                        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.
                    </Text>
                ))}
            </Box>
        </Box>
    );
}

Long Content Handling

Titles and breadcrumbs will truncate gracefully when content overflows.

Long Content Handling

"use client";

import { Box, PageHeader } from '@photonix/ultimate';

export default function PageHeaderVariantLongContentExample() {
    return (
        <Box maxW={600}>
            <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}
            />
        </Box>
    );
}

PageHeader

Preview

Component API

PageHeader

Variants

Basic Title

With Breadcrumbs

With Back Button

With Actions

Sticky Header

Long Content Handling

On this page