# EuiAppSidebarDrawerComponent

**Type:** component

<p>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.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Sidebar drawer for user profile details --&gt;
&lt;eui-app&gt;
  &lt;eui-app-sidebar&gt;
    &lt;eui-app-sidebar-header&gt;
      &lt;eui-app-sidebar-header-user-profile
        (toggle)=&quot;onSidebarProfileToggle($event)&quot;
        [hasProfileDrawer]=&quot;true&quot;&gt;
      &lt;/eui-app-sidebar-header-user-profile&gt;
    &lt;/eui-app-sidebar-header&gt;

    &lt;eui-app-sidebar-drawer [isExpanded]=&quot;drawerExpanded&quot;&gt;
      &lt;p&gt;&lt;strong&gt;User Profile Details&lt;/strong&gt;&lt;/p&gt;
      &lt;p&gt;Additional user information and settings&lt;/p&gt;
    &lt;/eui-app-sidebar-drawer&gt;

    &lt;eui-app-sidebar-body&gt;
      &lt;eui-app-sidebar-menu [items]=&quot;sidebarItems&quot;&gt;&lt;/eui-app-sidebar-menu&gt;
    &lt;/eui-app-sidebar-body&gt;
  &lt;/eui-app-sidebar&gt;
&lt;/eui-app&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-ts">drawerExpanded = false;

onSidebarProfileToggle(event: any): void {
  this.drawerExpanded = !this.drawerExpanded;
}</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Drawer content is keyboard accessible</li>
<li>Expanded/collapsed state is visually indicated</li>
<li>Content within drawer maintains focus management</li>
<li>Event propagation prevented to avoid sidebar conflicts</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be used within eui-app-sidebar for proper layout integration</li>
<li>isExpanded controls drawer visibility (default: false)</li>
<li>Typically toggled via eui-app-sidebar-header-user-profile</li>
<li>Commonly used for user profile details or extended settings</li>
<li>Drawer slides out over sidebar content when expanded</li>
<li>Content is projected via ng-content for flexible composition</li>
<li>Automatically prevents click events from propagating to sidebar</li>
<li>Positioned between sidebar header and body in layout</li>
<li>Includes automatic scroll when content exceeds viewport height</li>
</ul>


**Selector:** `eui-app-sidebar-drawer`

**Standalone:** false

## Inputs

- **isExpanded**: `boolean` - <p>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 &#39;true&#39;/&#39;false&#39;, empty attribute).</p>

