eui documentation
  1. Components
  2. EuiAppSidebarComponent

File

packages/components/layout/eui-app/eui-app-sidebar/sidebar.component.ts

Description

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.

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

Implements

OnInit OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.Default
encapsulation ViewEncapsulation.None
selector eui-app-sidebar
styleUrls ./_styles/_index.scss
templateUrl ./sidebar.component.html

Index

Properties
Methods
HostBindings
HostListeners

HostBindings

class
Type : string
Default value : 'eui-app-sidebar'

HostListeners

body:click
body:click()

Methods

close
close()
Decorators :
@HostListener('body:click')
Returns : void

Properties

asService
Type : unknown
Default value : inject(EuiAppShellService, { optional: true })!
string
Type : string
Default value : 'eui-app-sidebar'
Decorators :
@HostBinding('class')

results matching ""

    No results matching ""