Menu

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

Preview

Loading preview…

Import

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

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

Usage

Web Component

<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>

React

<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	Type	Default	Description
placement	Placement	'bottom-start'	Floating-ui placement
open	boolean	false	Whether the menu is open
offset	number	4	Offset from trigger in pixels

MenuItem Props

Property	Type	Default	Description
destructive	boolean	false	Destructive/danger styling
disabled	boolean	false	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