File

packages/components/layout/eui-header/header-right-content/header-right-content.component.ts

Description

Container component for right-aligned content within eui-header, typically containing user profile, notifications, or action buttons. Automatically positioned to the right side of the header with appropriate spacing and alignment. Detected by parent EuiHeaderComponent via content projection to ensure proper layout structure. Content is projected via ng-content allowing flexible composition of header actions and utilities.

<eui-app>
  <eui-app-header>
    <eui-header>
      <eui-header-logo></eui-header-logo>
      <eui-header-app appName="MyWorkplace"></eui-header-app>
      <eui-header-right-content>
        <button euiButton>Action</button>
      </eui-header-right-content>
    </eui-header>
  </eui-app-header>
</eui-app>

Accessibility

• Right-aligned positioning provides consistent layout
• Content should follow proper semantic structure
• Interactive elements must be keyboard accessible
• Maintains visual hierarchy in header

Notes

• Must be used within eui-header for proper layout
• Positioned at the end of the header (rightmost)
• Content projected via ng-content
• Typically contains buttons, icons, or user profile
• Alternative to eui-header-user-profile for custom content
• Automatically detected by parent EuiHeaderComponent
• Provides flexible container for header actions
• Common use: custom action buttons or utility controls

<ng-content />