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 PlayroomAPI Reference

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

Note: PageHeader uses fixed positioning on mobile. In real applications, only one PageHeader should be used per page. Multiple examples on this page demonstrate different configurations, but only the last one is visible due to the fixed positioning behavior.

Services (3)

<PageHeader 
  className="relative" // Only for docs website overlap issue - not recommended in implementation
  start={
    <IconButton
      aria-label="Back"
      icon={ChevronLeftIcon}
      variant="neutralTertiary"
      size="large"
      
    />
  }
  center={
    <Heading as="h3" className="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   
  className="relative" // Only for docs website overlap issue - not recommended in implementation
  start={
    <IconButton
      aria-label="Go back"
      icon={ChevronLeftIcon}
      size="large"
      variant="neutralTertiary"
      className="-m-2 md:m-auto"
    />
  }
  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 className="-m-1 md:m-auto">Save</Button>} 
  divider={false} 
/>
View in Playroom

Note: The Negative margin for the Icons on the left and right slot is for visual alignment in docs only.

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
  className="relative" 	// Only for docs website overlap issue - not recommended in implementation
  start={
   <Box className="flex md:hidden">
				<IconButton
					aria-label="Go back"
					icon={ChevronLeftIcon}
					variant="neutralTertiary"
					className="-m-2 md:m-auto"
				/>
			</Box>
  }
  center={
   <Heading
				as="h3"
				className="text-heading-16"
			>
				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"  className="-m-1 md:m-auto"/>
			</Box>
  }
/>
View in Playroom

Position​

Use the position prop to make the PageHeader take a specific position within the viewport.

  • sticky - Makes the PageHeader sticky on desktop and fixed on mobile.
  • absolute - Makes the PageHeader absolutely positioned.
  • none - PageHeader will render in the normal document flow without any positioning.

If not set, the component will default to sticky positioning.

Your brand

<PageHeader 
  position="sticky"
  start={
    <IconButton
      aria-label="Back"
      icon={ChevronLeftIcon}
      variant="neutralTertiary"
      size="large"
      
    />
  }
  center={
    <Heading as="h3" className="text-heading-16">
      Your brand
    </Heading>
  }
  end={
    <Button className="-m-1 md:m-auto">Save</Button>
  }
/>
View in Playroom

HorizontalPadding​

Use the hasInlinePadding prop to remove horizontal padding from the PageHeader.

If not set, the hasInlinePadding will default to true.

Note: This prop is useful when you want to create a page header that is flush with the edge of the viewport. Especially, when using the PageHeader within a .centric-layout container, the padding can be removed by setting the hasInlinePadding prop to false.

Notifications

<Box className="centric-layout bg-canvas">
    <PageHeader 
    hasInlinePadding={false}
    center={
        <Heading as="h3" className="text-heading-16">
        Notifications
        </Heading>
    }
    end={
        <Button className="-m-1 md:m-auto">Save</Button>
    }
    />
</Box>
View in Playroom

Custom examples​

1. With tabs​

Render a TabList in the center slot to combine page-level navigation with the header. Wrap the PageHeader and its content in a Tabs provider so the tabs control the content below. On mobile, the start slot can hold a back button while the tabs remain the primary navigation.

Billing information and invoices content area
<Tabs defaultValue="billing" size="standard">
  <PageHeader
    className="relative" // Only for docs website overlap issue
    center={
      <TabList>
        <TabItem value="billing">Billing</TabItem>
        <TabItem value="reports">Reports</TabItem>
      </TabList>
    }
    end={<Button variant="neutralSecondary">Admin Tools</Button>}
  />
  <Box className="p-4">
    <TabContent value="billing">
      <Text className="text-body-14">
        Billing information and invoices content area
      </Text>
    </TabContent>
    <TabContent value="reports">
      <Text className="text-body-14">
        Analytics and reporting data content area
      </Text>
    </TabContent>
  </Box>
</Tabs>
View in Playroom

2. Profile header​

Combine an Avatar with a name and supporting detail in the start slot to build a profile header. The end slot holds a contextual action, aligned to the top of the header with self-start.

John Kennedy

Chennai, TN, IN · 3:37 PM
<PageHeader
  className="relative" // Only for docs website overlap issue 
  start={
    <Box className="flex items-center gap-4">
      <Box>
        <Avatar name="Test" size="48" />
      </Box>
      <Box className="flex flex-col justify-center">
        <Heading as="h3" className="text-heading-16">
          John Kennedy
        </Heading>
        <Text className="text-body-12 text-secondary">
          Chennai, TN, IN · 3:37 PM
        </Text>
      </Box>
    </Box>
  }
  end={
    <Box className="self-start">
      <IconButton
        aria-label="Edit contact"
        icon={EditIcon}
        variant="neutralTertiary"
        className="-m-1 md:m-auto"
      />
    </Box>
  }
/>
View in Playroom

With Centric layout​

The PageHeader spans the full width while page content sits inside a .centric-layout wrapper, which provides responsive gutters and centers the content. Add top padding to the content to account for the header's fixed positioning on mobile.

Dashboard Overview

Page Content with Centric Layout

This content is contained within a `.centric-layout` wrapper, which provides responsive gutters and centers the content. The PageHeader above spans the full width and works correctly with this layout pattern.
The main section content
<Box>
  <PageHeader
    start={
      <IconButton
        aria-label="Go back"
        icon={ChevronLeftIcon}
        variant="neutralTertiary"
        className="-m-2 md:m-auto"
      />
    }
    center={
      <Heading as="h3" className="text-heading-16 truncate">
        Dashboard Overview
      </Heading>
    }
    end={
      <Box className="flex items-center gap-2">
        <Button className="hidden sm:block" variant="neutralSecondary">
          Settings
        </Button>
      </Box>
    }
  />
  <Box className="centric-layout pt-20 md:pt-8">
    <Box className="bg-canvas-secondary p-6 rounded-8px">
      <Heading as="h4" className="text-heading-20 mb-4">
        Page Content with Centric Layout
      </Heading>
      <Text className="text-body-14 text-secondary mb-4">
        This content is contained within a `.centric-layout` wrapper, which
        provides responsive gutters and centers the content. The PageHeader above
        spans the full width and works correctly with this layout pattern.
      </Text>
      <Box className="h-96 bg-canvas-tertiary rounded-4px flex items-center justify-center">
        <Text className="text-body-12 text-secondary">
          The main section content
        </Text>
      </Box>
    </Box>
  </Box>
</Box>
View in Playroom

API Reference​

PageHeader

PropDefaultDescription
start?_React.ReactNode
Content aligned to the left (navigation elements, breadcrumbs, back buttons)
center?_React.ReactNode
Content aligned to the center (page titles, status indicators, progress bars)
end?_React.ReactNode
Content aligned to the right (primary actions, save buttons, share options, overflow menus)
divider?trueboolean
Shows a bottom border divider to separate header from page content
position?_'sticky' | 'absolute' | 'none'
Position the header as sticky (becomes fixed on mobile).
hasInlinePadding?trueboolean
Whether to add horizontal padding to the header.

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" className="-m-2 md:m-auto"/>}
  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" className="-m-1 md:m-auto">Save</Button>
    </div>
  }
  className="relative 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)