# EuiPageHeaderComponent

**Type:** component



Page header component that provides a structured title area with optional collapsible functionality.
Displays primary and secondary labels with tooltip support for additional context.
Supports multi-line layouts and expandable/collapsible behavior for complex headers.
Typically positioned at the top of page content to establish page identity and navigation context.
Must be used as a direct child of eui-page to maintain proper layout structure.

### Basic header
```html
<eui-page-header
  label="User Management"
  subLabel="Manage user accounts and permissions">
</eui-page-header>
```

### Collapsible header
```html
<eui-page-header
  label="Advanced Settings"
  [isCollapsible]="true"
  [isCollapsed]="headerCollapsed"
  collapsedLabel="Expand settings"
  expandedLabel="Collapse settings"
  (collapse)="onHeaderToggle($event)">
  <eui-page-header-body>
    <p>Additional header content</p>
  </eui-page-header-body>
</eui-page-header>
```

### With tooltips
```html
<eui-page-header
  label="Dashboard"
  labelTooltip="View your personalized dashboard"
  subLabel="Last updated: Today"
  subLabelTooltip="Data refreshes every 5 minutes">
</eui-page-header>
```

### Accessibility
- Header label uses appropriate heading level for document structure
- Collapse/expand buttons include descriptive aria-labels
- Tooltips provide additional context without hiding essential information
- Keyboard navigation supported for interactive elements

### Notes
- Must be direct child of eui-page component
- Use isHeaderMultilines for headers with extensive content
- Collapse functionality requires isCollapsible to be true
- Tooltips appear on hover and focus for accessibility


**Selector:** `eui-page-header`

## Inputs
- **collapsedLabel**: `string` - Accessible label text for the toggle button when header is in collapsed state. Describes the action to expand the header for screen readers.
- **expandedLabel**: `string` - Accessible label text for the toggle button when header is in expanded state. Describes the action to collapse the header for screen readers.
- **isCollapsed**: `boolean` - Controls the collapsed state of the header when collapsible is enabled. When true, hides header content; when false, displays full header.
- **isCollapsible**: `boolean` - Enables expand/collapse functionality for the page header. Adds a toggle button to show or hide header content dynamically.
- **isHeaderMultilines**: `boolean` - Enables multi-line layout mode for headers with extensive content. Adjusts spacing and alignment to accommodate multiple lines of text or components.
- **label**: `any` - Primary heading text displayed as the main page title. Serves as the principal identifier for the page content.
- **labelTooltip**: `any` - Tooltip text displayed when hovering over the main label. Provides additional explanatory information for the page title.
- **subLabel**: `any` - Secondary descriptive text displayed below or alongside the main label. Provides supplementary information or context about the page.
- **subLabelTooltip**: `any` - Tooltip text displayed when hovering over the sub-label. Provides additional explanatory information for the secondary text.

## Outputs
- **collapse**: `EventEmitter` - Emitted when the header's collapsed state changes via user interaction. Payload: boolean indicating the new collapsed state (true when collapsed, false when expanded). Triggered by clicking the collapse/expand toggle button.