# EuiAccordionItemHeaderDirective

**Type:** directive



Directive for marking and styling the header content of an accordion item.
Applied to content that should appear in the clickable header section of the accordion panel.
The header acts as the toggle trigger for expanding/collapsing the accordion item.
Content projected with this directive is displayed with appropriate styling and interactive behavior.

```html
<eui-accordion-item>
  <eui-accordion-item-header>
    Section Title
  </eui-accordion-item-header>
  Panel content
</eui-accordion-item>
```

### Accessibility
- Header content is automatically wrapped in an interactive button element
- Keyboard accessible with Enter/Space keys for toggling
- Screen readers announce the header text and expansion state

### Notes
- Required for proper accordion item structure
- Must be a direct child of eui-accordion-item
- Only one header directive should be used per accordion item
- Header content can include text, icons, or other inline elements


**Selector:** `eui-accordion-item-header`