Menu

Dropdown menu with trigger, floating positioning, and keyboard navigation.

Import

import '@kittl/ui';

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

Usage

<kittl-menu placement="bottom-start">
  <kittl-menu-trigger>
    <kittl-button variant="secondary">Options</kittl-button>
  </kittl-menu-trigger>
  <kittl-menu-item>Edit</kittl-menu-item>
  <kittl-menu-item>Duplicate</kittl-menu-item>
  <kittl-menu-item destructive>Delete</kittl-menu-item>
</kittl-menu>

import { Button, Menu, MenuItem, MenuTrigger } from '@kittl/ui-react';

/** Basic Menu usage, rendered live on the docs site. */
export const MenuUsage = () => (
  <Menu
    placement="bottom-start"
    onMenuOpen={() => console.log('opened')}
    onMenuClose={() => console.log('closed')}
  >
    <MenuTrigger>
      <Button variant="secondary">Options</Button>
    </MenuTrigger>
    <MenuItem onMenuItemSelect={() => console.log('edit')}>Edit</MenuItem>
    <MenuItem onMenuItemSelect={() => console.log('duplicate')}>
      Duplicate
    </MenuItem>
    <MenuItem destructive onMenuItemSelect={() => console.log('delete')}>
      Delete
    </MenuItem>
  </Menu>
);

Menu Props

Property	Attribute	Type	Default	Description
placement	placement	Placement	'bottom-start'	Floating-ui placement
open	open	boolean	false	Whether the menu is open
offset	offset	number	4	Offset from trigger in pixels

MenuItem Props

Property	Attribute	Type	Default	Description
destructive	destructive	boolean	false	Destructive/danger styling
disabled	disabled	boolean	—	Disable the item

MenuItem Slots

Slot	Description
icon-start	Icon before the label
(default)	Label text
icon-end	Icon after the label

Events

Event	Source	Detail	Description
menu-open	Menu	—	Menu opened
menu-close	Menu	—	Menu closed
menu-item-select	MenuItem	—	Item selected

React props: onMenuOpen, onMenuClose, onMenuItemSelect

Accessibility

• Menu content has role="menu"
• Items have role="menuitem"
• Keyboard: ArrowUp/ArrowDown navigate items, Enter/Space select, Escape closes