### 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

- rightContent
- string

###### HostBindings

- class

### 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 ""