eui documentation
  1. Components
  2. EuiAppSidebarBodyComponent

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
HostBindings

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 ""