eui documentation
  1. Components
  2. EuiPageHeaderComponent

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
Methods
Inputs
Outputs
HostBindings
Accessors

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
getcssClasses()

results matching ""

    No results matching ""