File

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

Description

Container component for the sidebar footer area, typically containing secondary actions, settings, or utility links. Automatically registers with EuiAppShellService to calculate and set CSS variables for proper layout spacing. Manages the --eui-app-sidebar-footer-height CSS variable to coordinate vertical positioning of sidebar content. Content is projected via ng-content allowing flexible footer composition.

<!-- Sidebar footer with custom content -->
<eui-app>
  <eui-app-sidebar>
    <eui-app-sidebar-footer>
      <p>Version 1.0.0</p>
      <a href="/help">Help</a>
    </eui-app-sidebar-footer>
  </eui-app-sidebar>
</eui-app>

Accessibility

• Provides semantic container for sidebar footer content
• Content projection allows flexible accessible structure
• Links and buttons within footer maintain keyboard accessibility

Notes

• Must be used within eui-app-sidebar for proper layout integration
• Automatically registers with EuiAppShellService on init
• Sets --eui-app-sidebar-footer-height CSS variable for layout calculations
• Typically contains utility links, version info, or secondary actions
• Content is projected via ng-content for flexible composition
• Cleans up CSS variables on destroy
• Height is automatically calculated based on content
• Positioned at bottom of sidebar, below sidebar body

Implements

OnInit OnDestroy

<ng-content/>