Header

Extension panel header with optional start slot and built-in options menu.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

// React
import { Header, MenuItem } from '@kittl/ui-react';

Usage

Web Component

<kittl-header bordered>
  <kittl-text slot="start" variant="h5">My Extension</kittl-text>
  Body content
  <kittl-menu-item slot="menu">Settings</kittl-menu-item>
  <kittl-menu-item slot="menu" destructive>Delete</kittl-menu-item>
</kittl-header>

React

<Header bordered onMenuItemSelect={(e) => console.log(e.detail)}>
  <Text slot="start" variant="h5">My Extension</Text>
  Body content
  <MenuItem slot="menu">Settings</MenuItem>
  <MenuItem slot="menu" destructive>Delete</MenuItem>
</Header>

Props

Property	Type	Default	Description
bordered	boolean	false	Show bottom border

Slots

Slot	Description
start	Left area (title, icon, etc.)
(default)	Center body content
menu	Menu items for the "More options" dropdown

Events

Event	Detail	Description
menu-item-select	—	Bubbles from child MenuItem when selected

React prop: onMenuItemSelect

Accessibility

• Menu button has aria-label="More options"