eui documentation
  1. Components
  2. EuiHeaderAppComponent

File

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

Description

Application name and subtitle component for header placement, displaying the application title and descriptive text. Provides centralized management of application identity with synchronization to EuiAppShellService for global access. Supports full application name, shortened name for responsive layouts, and optional subtitle for context. Allows custom content projection via child components (EuiHeaderAppNameComponent, EuiHeaderAppSubtitleComponent, EuiHeaderAppNameLogoComponent). Automatically updates application shell state when input values change, enabling reactive UI updates across the application.

Example :
<!-- Using input properties -->
<eui-app>
  <eui-app-header>
    <eui-header>
      <eui-header-app
        appName="MyWorkplace"
        appShortName="MWP"
        appSubTitle="Dashboard">
      </eui-header-app>
    </eui-header>
  </eui-app-header>
</eui-app>

<!-- Using content projection -->
<eui-app>
  <eui-app-header>
    <eui-header>
      <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>
  </eui-app-header>
</eui-app>

Accessibility

  • Application name provides primary identification context
  • Subtitle offers additional contextual information
  • Text content is readable by screen readers
  • Content projection allows semantic HTML structure

Notes

  • Must be used within eui-header for proper layout
  • Two usage modes: input properties or content projection
  • appName is the full application name (required)
  • appShortName displays in responsive/compact layouts (defaults to appName)
  • appSubTitle provides contextual information below name
  • Content projection via eui-header-app-name and eui-header-app-subtitle
  • Automatically syncs with EuiAppShellService state
  • State changes propagate to all subscribed components
  • Positioned in header between logo/environment and user profile
  • Responsive behavior switches between full and short names

Implements

OnInit OnChanges OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.Default
encapsulation ViewEncapsulation.None
selector eui-header-app
templateUrl ./header-app.component.html
styleUrl ./header-app.component.scss

Index

Properties
Inputs
HostBindings

Inputs

appName
Type : string
Default value : ''

Full application name displayed in the header. Used as the primary application identifier and fallback for appShortName when not provided. Synchronized with EuiAppShellService state for global access.
appShortName
Type : string
Default value : ''

Shortened version of the application name for responsive or compact layouts. When empty, automatically falls back to appName value. Useful for displaying abbreviated names in mobile or collapsed header states.
appSubTitle
Type : string
Default value : ''

Subtitle or descriptive text displayed below the application name. Provides additional context about the application, current section, or user role. Synchronized with EuiAppShellService state for global access.

HostBindings

class
Type : string
Default value : 'eui-header-app'

Properties

cssClass
Type : string
Default value : 'eui-header-app'
Decorators :
@HostBinding('class')
customAppName
Type : EuiHeaderAppNameComponent
Decorators :
@ContentChild(undefined)
customAppNameLogo
Type : EuiHeaderAppNameLogoComponent
Decorators :
@ContentChild(undefined)
customAppSubtitle
Type : EuiHeaderAppSubtitleComponent
Decorators :
@ContentChild(undefined)

results matching ""

    No results matching ""