# EuiHeaderAppComponent

**Type:** component



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.

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


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

## Inputs
- **appName**: `string` - 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**: `string` - 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**: `string` - 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.
