# EuiAppComponent

**Type:** component



Root application shell component that provides the foundational layout structure for EUI applications.
Manages the main application frame including sidebar navigation, toolbar, page content area, and global UI services.
Handles responsive behavior, viewport tracking, and theme application across the entire application.
Integrates with EuiAppShellService to maintain centralized application state for layout configuration.

```html
<!-- Basic app shell -->
<eui-app>
  <eui-app-sidebar>
    <eui-app-sidebar-menu>
      <!-- Navigation menu items -->
    </eui-app-sidebar-menu>
  </eui-app-sidebar>

  <eui-app-toolbar>
    <!-- Toolbar content -->
  </eui-app-toolbar>

  <router-outlet></router-outlet>
</eui-app>

<!-- With custom configuration -->
<eui-app
  [isSidebarOpen]="sidebarOpen"
  [isShrinkHeaderActive]="true"
  [themeClass]="'dark-theme'"
  appSubTitle="Dashboard">
  <eui-app-sidebar>
    <!-- Sidebar content -->
  </eui-app-sidebar>
  <router-outlet></router-outlet>
</eui-app>

<!-- Without sidebar -->
<eui-app [isSidebarHidden]="true">
  <eui-app-toolbar>
    <!-- Toolbar only layout -->
  </eui-app-toolbar>
  <router-outlet></router-outlet>
</eui-app>
```

```ts
export class AppComponent {
  sidebarOpen = true;

  constructor(private appShellService: EuiAppShellService) {
    // Access global app state
    this.appShellService.state$.subscribe(state => {
      console.log('App state:', state);
    });
  }
}
```

### Accessibility
- Provides semantic application structure with proper landmarks
- Sidebar navigation is keyboard accessible
- Focus management handled during sidebar expand/collapse
- Responsive behavior maintains usability across devices
- Theme changes preserve contrast ratios for accessibility
- Growl notifications use ARIA live regions for screen reader announcements

### Notes
- Must be used as root layout component in application
- Integrates with EuiAppShellService for centralized state management
- Automatically tracks viewport dimensions and updates on resize
- Applies 'eui-21' class to HTML element for global styling
- isSidebarOpen controls sidebar expanded/collapsed state (default: true)
- isSidebarHidden completely removes sidebar from layout (default: false)
- isShrinkHeaderActive enables header shrinking on scroll (default: true)
- themeClass applies custom theme styling to entire application
- appSubTitle displays contextual subtitle in header/toolbar
- Manages growl notification overlay positioning and lifecycle
- Handles browser detection for Chrome, IE, Firefox specific behaviors
- Automatically sets CSS custom properties for viewport dimensions
- Content projection expects eui-app-sidebar, eui-app-toolbar, and router-outlet
- Use EuiAppPageWrapperDirective for custom page wrapper layouts
- Responsive breakpoints handled automatically via media queries


**Selector:** `eui-app`

## Inputs
- **appSubTitle**: `string` - Subtitle text displayed in the application header or toolbar area. Typically used to show contextual information about the current view or section.
- **isShrinkHeaderActive**: `boolean` - Enables automatic header shrinking behavior on scroll. When true, the application header reduces its height when user scrolls down, maximizing content area.
- **isSidebarHidden**: `boolean` - Completely hides the sidebar from the layout. When true, sidebar is removed from DOM and content area expands to full width. Differs from isSidebarOpen which only collapses the sidebar.
- **isSidebarOpen**: `boolean` - Controls the expanded/collapsed state of the application sidebar. When true, sidebar is fully expanded showing labels and content. When false, sidebar collapses to icon-only mode. Syncs with EuiAppShellService state to coordinate sidebar behavior across the application.
- **themeClass**: `string` - CSS class name to apply a custom theme to the application shell. Allows theme switching by applying predefined theme class names to the root component.