# EuiHeaderComponent

**Type:** component



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.

```html
<!-- 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


**Selector:** `eui-header`