# EuiPageHeaderComponent

**Type:** component

<p>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.</p>
<h3>Basic header</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page-header
  label=&quot;User Management&quot;
  subLabel=&quot;Manage user accounts and permissions&quot;&gt;
&lt;/eui-page-header&gt;</code></pre></div><h3>Collapsible header</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page-header
  label=&quot;Advanced Settings&quot;
  [isCollapsible]=&quot;true&quot;
  [isCollapsed]=&quot;headerCollapsed&quot;
  collapsedLabel=&quot;Expand settings&quot;
  expandedLabel=&quot;Collapse settings&quot;
  (collapse)=&quot;onHeaderToggle($event)&quot;&gt;
  &lt;eui-page-header-body&gt;
    &lt;p&gt;Additional header content&lt;/p&gt;
  &lt;/eui-page-header-body&gt;
&lt;/eui-page-header&gt;</code></pre></div><h3>With tooltips</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page-header
  label=&quot;Dashboard&quot;
  labelTooltip=&quot;View your personalized dashboard&quot;
  subLabel=&quot;Last updated: Today&quot;
  subLabelTooltip=&quot;Data refreshes every 5 minutes&quot;&gt;
&lt;/eui-page-header&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Header label uses appropriate heading level for document structure</li>
<li>Collapse/expand buttons include descriptive aria-labels</li>
<li>Tooltips provide additional context without hiding essential information</li>
<li>Keyboard navigation supported for interactive elements</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be direct child of eui-page component</li>
<li>Use isHeaderMultilines for headers with extensive content</li>
<li>Collapse functionality requires isCollapsible to be true</li>
<li>Tooltips appear on hover and focus for accessibility</li>
</ul>


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

**Standalone:** false

## Inputs

- **collapsedLabel**: `string` - <p>Accessible label text for the toggle button when header is in collapsed state.
Describes the action to expand the header for screen readers.</p>

- **expandedLabel**: `string` - <p>Accessible label text for the toggle button when header is in expanded state.
Describes the action to collapse the header for screen readers.</p>

- **isCollapsed**: `boolean` - <p>Controls the collapsed state of the header when collapsible is enabled.
When true, hides header content; when false, displays full header.</p>

- **isCollapsible**: `boolean` - <p>Enables expand/collapse functionality for the page header.
Adds a toggle button to show or hide header content dynamically.</p>

- **isHeaderMultilines**: `boolean` - <p>Enables multi-line layout mode for headers with extensive content.
Adjusts spacing and alignment to accommodate multiple lines of text or components.</p>

- **label**: `any` - <p>Primary heading text displayed as the main page title.
Serves as the principal identifier for the page content.</p>

- **labelTooltip**: `any` - <p>Tooltip text displayed when hovering over the main label.
Provides additional explanatory information for the page title.</p>

- **subLabel**: `any` - <p>Secondary descriptive text displayed below or alongside the main label.
Provides supplementary information or context about the page.</p>

- **subLabelTooltip**: `any` - <p>Tooltip text displayed when hovering over the sub-label.
Provides additional explanatory information for the secondary text.</p>


## Outputs

- **collapse**: `EventEmitter` - <p>Emitted when the header&#39;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.</p>

