eui documentation
  1. Components
  2. EuiHeaderComponent

File

packages/components/layout/eui-header/header.component.ts

Description

Standalone header component for displaying page-level or section-level headers with branding and navigation. Provides a flexible container with support for left and right content areas through content projection. Unlike eui-app-header which is part of the application shell, this component can be used independently within page layouts. Automatically detects and positions EuiHeaderRightContentComponent when projected for consistent right-aligned content placement.

Example :
<!-- Within eui-app-header -->
<eui-app>
  <eui-app-header>
    <eui-header>
      <eui-header-logo></eui-header-logo>
      <eui-header-environment>DEV</eui-header-environment>
      <eui-header-app appName="MyWorkplace"></eui-header-app>
      <eui-header-user-profile></eui-header-user-profile>
    </eui-header>
  </eui-app-header>
</eui-app>

<!-- Standalone usage -->
<eui-header>
  <h1>Page Title</h1>
  <eui-header-right-content>
    <button euiButton>Action</button>
  </eui-header-right-content>
</eui-header>

Accessibility

  • Provides semantic header structure
  • Content should follow proper heading hierarchy
  • Interactive elements must be keyboard accessible
  • Maintains consistent navigation patterns

Notes

  • Can be used within eui-app-header or standalone
  • Content projected via ng-content
  • Automatically detects eui-header-right-content for alignment
  • Supports all eui-header-* child components
  • Common children: eui-header-logo, eui-header-environment, eui-header-app
  • eui-header-user-profile typically positioned at the end
  • Flexible layout adapts to projected content
  • Use within eui-app-header for application shell integration
  • Use standalone for page-level or section headers

Metadata

encapsulation ViewEncapsulation.None
selector eui-header
templateUrl ./header.component.html
styleUrl ./header.component.scss

Index

Properties
HostBindings

HostBindings

class
Type : string
Default value : 'eui-header'

Properties

rightContent
Type : EuiHeaderRightContentComponent
Decorators :
@ContentChild(EuiHeaderRightContentComponent)
string
Type : string
Default value : 'eui-header'
Decorators :
@HostBinding('class')

results matching ""

    No results matching ""