### File

`packages/components/layout/eui-sidebar-toggle/sidebar-toggle.component.ts`

### Description

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.

Example :

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

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-sidebar-toggle`
imports | `AsyncPipe` `EUI_ICON_BUTTON`
templateUrl | `./sidebar-toggle.component.html`

### Index

###### Properties

- asService
- name

###### Methods

- onToggleSidebar

###### Inputs

- e2eAttr
- iconSvgFillColor

###### HostBindings

- class

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-sidebar-toggle'`
Data attribute value for end-to-end testing identification. Applied as data-e2e attribute on the host element for test automation.

iconSvgFillColor
Type : `any`
Custom fill color for the toggle icon SVG. Accepts any valid CSS color value to override default icon color. Optional.

### HostBindings

class
Type : `string`
Default value : `'eui-sidebar-toggle'`

### Methods

onToggleSidebar
`onToggleSidebar(event: Event)`

Parameters :

Name | Type | Optional
event | `Event` | No

Returns : `void`

### Properties

asService
Type : `unknown`
Default value : `inject(EuiAppShellService)`

name
Type : `string`
Default value : `'eui-sidebar-toggle'`
Decorators : `@HostBinding('class')`

# results matching ""

# No results matching ""