# EuiSidebarToggleComponent

**Type:** component



Toggle button component for controlling sidebar open/closed state in the application shell.
Provides a hamburger menu icon button that expands or collapses the application sidebar.
Integrates with EuiAppShellService to manage sidebar state and handle responsive behavior.
Automatically manages focus on mobile and tablet devices, directing focus to sidebar when opened.
Typically placed in application header or toolbar for consistent sidebar control.

```html
<!-- In header -->
<eui-app>
  <eui-app-header>
    <eui-header>
      <eui-sidebar-toggle></eui-sidebar-toggle>
      <eui-header-logo></eui-header-logo>
      <eui-header-app appName="MyWorkplace"></eui-header-app>
    </eui-header>
  </eui-app-header>
</eui-app>

<!-- In toolbar -->
<eui-app-toolbar>
  <eui-toolbar>
    <eui-sidebar-toggle iconSvgFillColor="primary"></eui-sidebar-toggle>
  </eui-toolbar>
</eui-app-toolbar>
```

### Accessibility
- Hamburger icon button keyboard accessible
- Toggles sidebar visibility on click/Enter
- Automatically manages focus on mobile/tablet
- Focus directed to sidebar when opened on small screens
- ARIA attributes for toggle state
- Clear visual affordance for interaction

### Notes
- Typically placed in header or toolbar
- Integrates with EuiAppShellService for state management
- Toggles sidebar open/closed state
- Responsive behavior: focus management on mobile/tablet
- On mobile/tablet, opening sidebar sets isSidebarFocused to true
- Focus automatically moves to first focusable element in sidebar
- iconSvgFillColor for custom icon color
- e2eAttr for test automation (default: 'eui-sidebar-toggle')
- Hamburger icon standard for sidebar toggle
- Works with eui-app-sidebar component
- State synchronized across application via EuiAppShellService


**Selector:** `eui-sidebar-toggle`

## Inputs
- **e2eAttr**: `string` - Data attribute value for end-to-end testing identification. Applied as data-e2e attribute on the host element for test automation.
- **iconSvgFillColor**: `any` - Custom fill color for the toggle icon SVG. Accepts any valid CSS color value to override default icon color. Optional.