PageHeader

The PageHeader component provides a consistent layout structure for page-level navigation and actions. It's designed to create unified header experiences across different page types, with three distinct content areas that automatically handle responsive behavior and proper spacing.

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { PageHeader } from '@adaptavant/eds-core';

Usage​

Basic usage with start (navigation), center (title), and end (actions) content slots.

Props:

  • Start slot: Navigation elements (back buttons, breadcrumbs, menu toggles)
  • Center slot: Page identification (titles, status indicators, progress bars)
  • End slot: Primary actions (save buttons, share options, overflow menus)
  • Divider: Optional bottom border to separate header from content

Services (3)

<PageHeader
  start={
    <IconButton
      aria-label="Back"
      icon={ChevronLeftIcon}
      variant="neutralTertiary"
      size="large"
    />
  }
  center={
    <Heading as="h3" className="text-heading-18 md:text-heading-16">
      Services (3)
    </Heading>
  }
  end={
    <IconButton aria-label="Share" icon={AddIcon} />
  }
/>
View in Playroom

Note: Accessibility guidelines suggest using <h1> tags. As these docs can only contain a single <h1>, we’ve opted for <h3> here.

Divider​

The divider is enabled by default. Set divider={false} to remove the bottom border for cleaner layouts.

Your brand

<PageHeader
  start={
    <IconButton
      aria-label="Go back"
      icon={ChevronLeftIcon}
      size="large"
      variant="neutralTertiary"
    />
  }
  center={
    <Box className="flex items-center gap-1 min-w-0 flex-1">
      <MapPinIcon className="shrink-0" size="16" />
      <Box className="flex items-center gap-2 md:gap-6 min-w-0 flex-1">
        <Heading as="h3" className="text-heading-16 font-strong truncate">
          Your brand
        </Heading>
        <Box className="hidden md:flex items-center gap-1 md:gap-2 shrink-0">
          <svg 
            xmlns="http://www.w3.org/2000/svg" 
            width="16" 
            height="16"            
          >
            <path 
              fillRule="evenodd" 
              clipRule="evenodd" 
              d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13Z" 
              fill="#DBDBDB"
            />
            <path 
              fillRule="evenodd" 
              clipRule="evenodd" 
              d="M12.1861 1.18264C10.9268 0.409348 9.47782 0 8 0V3C10.7614 3 13 5.23858 13 8C13 9.10489 12.6416 10.1261 12.0348 10.9537L14.4552 12.7255C15.3281 11.5331 15.8537 10.1221 15.9736 8.6492C16.0935 7.17625 15.8031 5.69887 15.1346 4.38091C14.466 3.06295 13.4455 1.95594 12.1861 1.18264Z" 
              fill="#9C9C9C"
            />
          </svg>

          <Text className="text-body-10 md:text-body-12 text-secondary whitespace-nowrap">
            35% complete
          </Text>
        </Box>
      </Box>
    </Box>
  }
  end={<Button>Save</Button>} 
  divider={false} 
/>
View in Playroom

MobileOnlyNavigation​

Demonstrates a mobile-first navigation pattern where navigation elements (back button and action icons) are only visible on mobile devices and hidden on desktop. The center title remains visible across all screen sizes. This pattern is useful for mobile apps or responsive designs where desktop users navigate differently than mobile users.

Business Phone Number

<PageHeader
  start={
   <Box className="flex md:hidden">
				<IconButton
					aria-label="Go back"
					icon={ChevronLeftIcon}
					variant="neutralTertiary"
				/>
			</Box>
  }
  center={
   <Heading
				as="h3"
				className="text-heading-14 md:text-heading-12 text-center"
			>
				Business Phone Number
			</Heading>
  }
  end={
   <Box className="flex items-center gap-2 md:hidden">
				<MailIcon size="16" />
				<IconButton aria-label="Add item" icon={AddIcon} size="small" />
			</Box>
  }
/>
View in Playroom

API Reference​

PageHeader

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

PageHeader parts​

Custom Styled Header

<PageHeader
  start={<IconButton aria-label="Back" icon={ChevronLeftIcon} variant="neutralTertiary"/>}
  center={<Heading as="h3" className="text-heading-16">Custom Styled Header</Heading>}
  end={
    <div className="flex items-center gap-2">
      <MailIcon size="20"/>
      <Button variant="accentPrimary">Save</Button>
    </div>
  }
  className="bg-canvas border-b-2 border-accent-primary shadow-lg md:px-4" // subtle container styling
  classNames={{
    start: "bg-neutral-secondary px-2 py-1", // very subtle background
    center: "px-2 text-positive", // minimal styling for center
    end: "bg-inverse-pressed text-white px-2 py-1", // very subtle accent
  }}
/>
View in Playroom
Styleable PartsDescription
rootThe main header container that wraps all content slots
startLeft content slot container (navigation, breadcrumbs)
centerCenter content slot container (titles, status)
endRight content slot container (actions, menus)