Layout

AppHeader

Global application header with start, center, and end slots for navigation and actions.

Overview

The AppHeader component is the global header bar for your application. It provides three slots (start, center, end) for flexible content placement such as logo, navigation, search, and user actions.

Props

Prop	Type	Default	Description
`start`	`ReactNode`	-	Left side content (logo, menu button, etc.)
`center`	`ReactNode`	-	Center content (search, title, etc.)
`end`	`ReactNode`	-	Right side content (actions, user menu, etc.)
`height`	`number \| string`	`64`	Header height
`bordered`	`boolean`	`true`	Whether to show bottom border

Usage

Basic Header

A simple header with logo and user menu.

import { AppHeader, Avatar, IconButton } from '@enara-health/ui-react';

<AppHeader
  start={
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <IconButton icon={<MenuIcon />} variant="ghost" aria-label="Menu" />
      <span>Enara Health</span>
    </div>
  }
  end={
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <IconButton icon={<BellIcon />} variant="ghost" aria-label="Notifications" />
      <Avatar name="Maya Alvarez" size="sm" />
    </div>
  }
/>

With Search

Add a search bar in the center slot.

<AppHeader
  start={<Logo />}
  center={
    <SearchInput placeholder="Search patients..." />
  }
  end={<UserMenu />}
/>

Custom Height

Adjust the header height to fit your design.

<AppHeader
  height={56}
  start={<Logo />}
  end={<UserMenu />}
/>

Without Border

Remove the bottom border for a cleaner look.

<AppHeader
  bordered={false}
  start={<Logo />}
  end={<UserMenu />}
/>

Slot Behavior

The three slots have different flex behaviors:

start - Flex-shrink 0, stays at minimum width
center - Flex 1, takes available space and centers content
end - Flex-shrink 0, stays at minimum width

This ensures the center content is centered in the remaining space between start and end, while start and end maintain their natural widths.

AppHeader vs PageHeader

These components serve different purposes:

Feature	AppHeader	PageHeader
Purpose	Global app navigation	Page-specific title
Position	Top of entire app	Top of page content
Content	Logo, search, user menu	Title, breadcrumb, actions
Changes with navigation	No	Yes