### File

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

### Description

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.

Example :

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

### Implements

`OnInit` `OnDestroy`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-app-header`
imports | `AsyncPipe` `EuiSidebarToggleComponent`
templateUrl | `./header.component.html`
styleUrl | `./header.scss`

### Index

###### Properties
asService role
###### Inputs
isShrinkHeaderActive
###### HostBindings
attr.role class
###### Accessors
cssClasses isShrinkHeaderActive

### Inputs

isShrinkHeaderActive
Type : `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.

### HostBindings

attr.role
Type : `string`
Default value : `'banner'`

class
Type : `string`

### Properties

asService
Type : `unknown`
Default value : `inject(EuiAppShellService)`

role
Type : `string`
Default value : `'banner'`
Decorators : `@HostBinding('attr.role')`

### Accessors

cssClasses
get `cssClasses()`

isShrinkHeaderActive
get `isShrinkHeaderActive()`
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. Returns : `boolean`
set `isShrinkHeaderActive(value: BooleanInput)`
Parameters :
Name | Type | Optional
value | `BooleanInput` | No
Returns : `void`

# results matching ""

# No results matching ""