eui documentation
  1. Components
  2. EuiAppSidebarDrawerComponent

File

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

Description

Expandable drawer component that slides out from the sidebar to display additional content or details. Provides a secondary panel for contextual information, settings, or extended navigation without leaving the current view. Manages expanded/collapsed state with corresponding CSS classes for animation and positioning. Prevents event propagation from drawer content to avoid unintended sidebar interactions.

Example :
<!-- Sidebar drawer for user profile details -->
<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]="drawerExpanded">
      <p><strong>User Profile Details</strong></p>
      <p>Additional user information and settings</p>
    </eui-app-sidebar-drawer>

    <eui-app-sidebar-body>
      <eui-app-sidebar-menu [items]="sidebarItems"></eui-app-sidebar-menu>
    </eui-app-sidebar-body>
  </eui-app-sidebar>
</eui-app>
Example :
drawerExpanded = false;

onSidebarProfileToggle(event: any): void {
  this.drawerExpanded = !this.drawerExpanded;
}

Accessibility

  • Drawer content is keyboard accessible
  • Expanded/collapsed state is visually indicated
  • Content within drawer maintains focus management
  • Event propagation prevented to avoid sidebar conflicts

Notes

  • Must be used within eui-app-sidebar for proper layout integration
  • isExpanded controls drawer visibility (default: false)
  • Typically toggled via eui-app-sidebar-header-user-profile
  • Commonly used for user profile details or extended settings
  • Drawer slides out over sidebar content when expanded
  • Content is projected via ng-content for flexible composition
  • Automatically prevents click events from propagating to sidebar
  • Positioned between sidebar header and body in layout
  • Includes automatic scroll when content exceeds viewport height

Metadata

encapsulation ViewEncapsulation.None
selector eui-app-sidebar-drawer
templateUrl ./sidebar-drawer.component.html

Index

Methods
Inputs
HostBindings
Accessors

Inputs

isExpanded
Type : boolean

Controls the expanded/collapsed state of the drawer panel. When true, drawer slides out to display its content. When false, drawer is hidden. Accepts boolean or boolean-coercible values (string 'true'/'false', empty attribute).

HostBindings

class
Type : string

Methods

Public onSidebarDrawerContentClick
onSidebarDrawerContentClick(event: Event)
Parameters :
Name Type Optional
event Event No
Returns : void

Accessors

isExpanded
getisExpanded()

Controls the expanded/collapsed state of the drawer panel. When true, drawer slides out to display its content. When false, drawer is hidden. Accepts boolean or boolean-coercible values (string 'true'/'false', empty attribute).

Returns : boolean
setisExpanded(value: BooleanInput)
Parameters :
Name Type Optional
value BooleanInput No
Returns : void
cssClasses
getcssClasses()

results matching ""

    No results matching ""