File

packages/components/eui-page/components/eui-page-header/components/eui-page-header-body.component.ts

Description

Body content area within the page header for additional header content (v1). Provides a flexible container for search bars, filters, tabs, or other header elements. Positioned below the main header label and action items.

With search bar

<eui-page-header label="Documents">
  <eui-page-header-body>
    <eui-search-bar placeholder="Search documents..."></eui-search-bar>
  </eui-page-header-body>
</eui-page-header>

With tabs

<eui-page-header-body>
  <eui-tabs [items]="tabItems"></eui-tabs>
</eui-page-header-body>

Accessibility

• Ensure interactive elements within body are keyboard accessible
• Use semantic HTML for proper document structure
• Maintain logical focus order

Notes

• Must be used within eui-page-header component
• Provides flexible space for header-related controls
• Automatically positioned in header layout structure

<ng-content/>