# EuiAppSidebarBodyComponent

**Type:** component

<p>Container component for the main content area of the sidebar, positioned between header and footer.
Provides a scrollable region for sidebar navigation menus or other interactive content.
Automatically handles vertical spacing to accommodate sidebar header and footer when present.
Content is projected via ng-content allowing flexible body composition.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Sidebar body with navigation menu --&gt;
&lt;eui-app&gt;
  &lt;eui-app-sidebar&gt;
    &lt;eui-app-sidebar-body&gt;
      &lt;eui-app-sidebar-menu
        [items]=&quot;sidebarItems&quot;
        [hasFilter]=&quot;true&quot;
        [hasIcons]=&quot;true&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><h3>Accessibility</h3>
<ul>
<li>Provides scrollable navigation region</li>
<li>Content projection allows flexible accessible structure</li>
<li>Child menu components handle keyboard navigation</li>
<li>Scroll behavior maintains focus visibility</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be used within eui-app-sidebar for proper layout integration</li>
<li>Positioned between eui-app-sidebar-header and eui-app-sidebar-footer</li>
<li>Typically contains eui-app-sidebar-menu for navigation</li>
<li>Automatically scrollable when content exceeds available height</li>
<li>Content is projected via ng-content for flexible composition</li>
<li>Vertical spacing automatically adjusts for header/footer presence</li>
<li>Takes remaining vertical space between header and footer</li>
</ul>


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

**Standalone:** false
