# EuiAppHeaderComponent

**Type:** component



Application header component that provides a top-level banner area for branding, navigation, and global actions.
Automatically registers with EuiAppShellService to coordinate layout calculations and CSS variable management.
Supports automatic header shrinking on scroll to maximize content area when user scrolls down the page.
Integrates with Angular CDK ScrollDispatcher for optimized scroll event handling outside Angular zone.
Includes built-in sidebar toggle integration for responsive navigation control.

```html
<!-- Basic 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>
        <eui-header-app-name><strong>My</strong>Workplace</eui-header-app-name>
        <eui-header-app-subtitle>Dashboard</eui-header-app-subtitle>
      </eui-header-app>
      <eui-header-user-profile>
        <!-- User profile menu -->
      </eui-header-user-profile>
    </eui-header>
  </eui-app-header>
</eui-app>

<!-- With shrink on scroll -->
<eui-app [isShrinkHeaderActive]="true">
  <eui-app-header [isShrinkHeaderActive]="true">
    <eui-header>
      <!-- Header content -->
    </eui-header>
  </eui-app-header>
</eui-app>
```

### Accessibility
- Uses role="banner" for semantic landmark identification
- Provides consistent branding and navigation structure
- Sidebar toggle is keyboard accessible
- Header shrinking maintains accessibility in all states
- Child components handle their own accessibility features

### Notes
- Must be used within eui-app component for proper layout integration
- Automatically registers with EuiAppShellService on init
- Sets --eui-app-header-height CSS variable for layout calculations
- isShrinkHeaderActive enables scroll-based height reduction (default: false)
- Scroll detection runs outside Angular zone for performance
- Expects eui-header child component for content projection
- Includes built-in sidebar toggle for responsive layouts
- Cleans up layout state and CSS variables on destroy
- Header shrinks when viewport scroll position > 0
- Positioned at top of application, above toolbar and content


**Selector:** `eui-app-header`

## Inputs
- **isShrinkHeaderActive**: `boolean` - Enables automatic header height reduction when user scrolls down the page. When true, monitors viewport scroll position and applies shrinked styling to reduce header height, maximizing content area.