eui documentation
  1. Components
  2. EuiSidebarToggleComponent

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
Methods
Inputs
HostBindings

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