### File

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

### Description

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.

Example :

    <!-- Sidebar body with navigation menu -->
    <eui-app>
      <eui-app-sidebar>
        <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>
    </eui-app>

### Accessibility

- Provides scrollable navigation region
- Content projection allows flexible accessible structure
- Child menu components handle keyboard navigation
- Scroll behavior maintains focus visibility

### Notes

- Must be used within eui-app-sidebar for proper layout integration
- Positioned between eui-app-sidebar-header and eui-app-sidebar-footer
- Typically contains eui-app-sidebar-menu for navigation
- Automatically scrollable when content exceeds available height
- Content is projected via ng-content for flexible composition
- Vertical spacing automatically adjusts for header/footer presence
- Takes remaining vertical space between header and footer

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-app-sidebar-body`
templateUrl | `./sidebar-body.component.html`

### Index

###### Properties

- class

###### HostBindings

- class

### HostBindings

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

### Properties

class
Type : `string`
Default value : `'eui-app-sidebar-body'`
Decorators : `@HostBinding()`

# results matching ""

# No results matching ""