# EuiPageHeader

**Type:** component



Page header component that displays the page title, subtitle, and optional collapsible content.
Supports multi-line layouts and action items for page-level controls.

### Basic usage
```html
<eui-page-header label="Dashboard" subLabel="Overview"></eui-page-header>
```

### With tooltips
```html
<eui-page-header
  label="Settings"
  labelTooltip="Application settings"
  subLabel="Configuration"
  subLabelTooltip="Manage your preferences">
</eui-page-header>
```

### Collapsible header
```html
<eui-page-header
  [isCollapsible]="true"
  [isCollapsed]="collapsed"
  collapsedLabel="Expand details"
  expandedLabel="Collapse details"
  (collapse)="onCollapse($event)">
  <eui-page-header-body>
    Additional header content
  </eui-page-header-body>
</eui-page-header>
```

### Accessibility
- Label should be the main page heading (h1)
- Collapse button has descriptive aria-label
- Tooltips provide additional context for screen readers

### Notes
- Use `isHeaderMultilines` for headers with wrapping content
- Action items can be added via eui-page-header-action-items
- Collapsible mode useful for hiding secondary information


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

## Inputs
- **collapsedLabel**: `string` - 
- **expandedLabel**: `string` - 
- **isCollapsed**: `boolean` - 
- **isCollapsible**: `boolean` - 
- **isHeaderMultilines**: `boolean` - 
- **label**: `any` - 
- **labelTooltip**: `any` - 
- **subLabel**: `any` - 
- **subLabelTooltip**: `any` - 

## Outputs
- **collapse**: `EventEmitter` -