### File

`packages/components/eui-page/components/eui-page-header/eui-page-header.component.ts`

### Description

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

Example :

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

### Collapsible header

Example :

    <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

Example :

    <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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
selector | `eui-page-header`
imports | `EuiTooltipDirective` `NgTemplateOutlet` `EUI_ICON` `EUI_BUTTON`
templateUrl | `./eui-page-header.component.html`

### Index

###### Properties
pageHeaderBodyContent
###### Methods
Public onToggle
###### Inputs
collapsedLabel expandedLabel isCollapsed isCollapsible isHeaderMultilines label labelTooltip subLabel subLabelTooltip
###### Outputs
collapse
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

collapsedLabel
Type : `string`
Default value : `''`
Accessible label text for the toggle button when header is in collapsed state. Describes the action to expand the header for screen readers.

expandedLabel
Type : `string`
Default value : `''`
Accessible label text for the toggle button when header is in expanded state. Describes the action to collapse the header for screen readers.

isCollapsed
Type : `boolean`
Default value : `false`
Controls the collapsed state of the header when collapsible is enabled. When true, hides header content; when false, displays full header.

isCollapsible
Type : `boolean`
Default value : `false`
Enables expand/collapse functionality for the page header. Adds a toggle button to show or hide header content dynamically.

isHeaderMultilines
Type : `boolean`
Default value : `false`
Enables multi-line layout mode for headers with extensive content. Adjusts spacing and alignment to accommodate multiple lines of text or components.

label
Type : `any`
Primary heading text displayed as the main page title. Serves as the principal identifier for the page content.

labelTooltip
Type : `any`
Tooltip text displayed when hovering over the main label. Provides additional explanatory information for the page title.

subLabel
Type : `any`
Secondary descriptive text displayed below or alongside the main label. Provides supplementary information or context about the page.

subLabelTooltip
Type : `any`
Tooltip text displayed when hovering over the sub-label. Provides additional explanatory information for the secondary text.

### Outputs

collapse
Type : `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.

### HostBindings

class
Type : `string`

### Methods

Public onToggle
`onToggle()`
Returns : `void`

### Properties

pageHeaderBodyContent
Type : `QueryList<EuiPageHeaderBodyComponent>`
Decorators : `@ContentChild(undefined)`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""