Skip to main content

Header

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

Import​

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

Usage​

<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>
import { Header, MenuItem, Text } from '@kittl/ui-react';

/** Basic Header usage, rendered live on the docs site. */
export const HeaderUsage = () => (
  <Header bordered>
    <Text slot="start" variant="h5">
      My Extension
    </Text>
    Body content
    <MenuItem slot="menu" onMenuItemSelect={() => console.log('settings')}>
      Settings
    </MenuItem>
    <MenuItem
      slot="menu"
      destructive
      onMenuItemSelect={() => console.log('delete')}
    >
      Delete
    </MenuItem>
  </Header>
);

Props​

PropertyAttributeTypeDefaultDescription
borderedborderedbooleanfalseShow bottom border

Slots​

SlotDescription
startLeft area (title, icon, etc.)
(default)Center body content
menuMenu items for the "More options" dropdown

Events​

EventDetailDescription
menu-item-select—Bubbles from child MenuItem when selected

React prop: onMenuItemSelect on each MenuItem — the Header wrapper itself takes no event props.

Accessibility​

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