# EuiAppSidebarComponent

**Type:** component



Application sidebar component that provides a collapsible navigation panel for the application shell.
Automatically registers with EuiAppShellService to coordinate layout state and responsive behavior.
Handles automatic collapse on mobile and tablet breakpoints, and closes on body clicks in responsive modes.
Manages CSS variables for sidebar dimensions to ensure proper content area positioning.

```html
<!-- Basic sidebar within app structure -->
<eui-app>
  <eui-app-sidebar>
    <eui-app-sidebar-header>
      <eui-app-sidebar-header-user-profile
        (toggle)="onSidebarProfileToggle($event)"
        [hasProfileDrawer]="true">
      </eui-app-sidebar-header-user-profile>
    </eui-app-sidebar-header>

    <eui-app-sidebar-drawer [isExpanded]="false">
      <p>User profile details</p>
    </eui-app-sidebar-drawer>

    <eui-app-sidebar-body>
      <eui-app-sidebar-menu
        [items]="sidebarItems"
        [hasFilter]="true"
        [hasIcons]="true">
      </eui-app-sidebar-menu>
    </eui-app-sidebar-body>

    <eui-app-sidebar-footer>
      Footer content
    </eui-app-sidebar-footer>
  </eui-app-sidebar>
</eui-app>
```

### Accessibility
- Provides semantic navigation structure for sidebar content
- Keyboard navigation supported through child menu components
- Automatically closes on mobile/tablet for better UX
- Focus management handled by child components
- Collapsible behavior maintains accessibility in all states

### Notes
- Must be used within eui-app component for proper layout integration
- Automatically registers with EuiAppShellService on init
- Manages CSS variables for sidebar width calculations
- Automatically collapses on mobile and tablet breakpoints
- Closes on body clicks when in responsive mode
- Expects child components: eui-app-sidebar-header, eui-app-sidebar-body, eui-app-sidebar-footer
- Optional eui-app-sidebar-drawer for expandable content (e.g., user profile)
- Cleans up layout state and CSS variables on destroy
- Sidebar state controlled via EuiAppShellService.isSidebarOpen


**Selector:** `eui-app-sidebar`
