eui documentation
  1. Components
  2. EuiAppHeaderComponent

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
Inputs
HostBindings
Accessors

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
getcssClasses()
isShrinkHeaderActive
getisShrinkHeaderActive()

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
setisShrinkHeaderActive(value: BooleanInput)
Parameters :
Name Type Optional
value BooleanInput No
Returns : void

results matching ""

    No results matching ""