TkxMenu

import { TkxMenu, TkxButton } from 'tekivex-ui';

Basic — interactive

Basic — click trigger, pick an item

Actions ▾

<TkxMenu
  trigger={<TkxButton variant="outline">Actions ▾</TkxButton>}
  items={[
    { type: 'action', id: 'edit',      label: 'Edit',      shortcut: '⌘E', onSelect: () => {} },
    { type: 'action', id: 'duplicate', label: 'Duplicate', shortcut: '⌘D', onSelect: () => {} },
    { type: 'action', id: 'archive',   label: 'Archive',                   onSelect: () => {} },
    { type: 'separator', id: 'sep1' },
    { type: 'action', id: 'delete',    label: 'Delete',    shortcut: '⌫',  danger: true, onSelect: () => {} },
  ]}
/>

With submenu

With separators, icons, and a sub-menu

File ▾

With shortcuts

<TkxMenuItem shortcut="⌘C" onSelect={copy}>Copy</TkxMenuItem>
<TkxMenuItem shortcut="⌘V" onSelect={paste}>Paste</TkxMenuItem>
<TkxMenuItem shortcut="⌘Z" onSelect={undo}>Undo</TkxMenuItem>

The shortcut prop is purely visual — it doesn’t bind the keys. Use a keyboard library (useHotkeys, etc.) to wire the actual handlers.

Submenus

<TkxMenu trigger={<TkxButton>File</TkxButton>}>
  <TkxMenuItem onSelect={newDoc}>New</TkxMenuItem>
  <TkxMenu.Submenu label="Open recent">
    <TkxMenuItem onSelect={() => open(1)}>document-1.md</TkxMenuItem>
    <TkxMenuItem onSelect={() => open(2)}>document-2.md</TkxMenuItem>
    <TkxMenuItem onSelect={() => open(3)}>document-3.md</TkxMenuItem>
  </TkxMenu.Submenu>
  <TkxMenuItem onSelect={save}>Save</TkxMenuItem>
</TkxMenu>

Submenus open on hover (after a short delay) or on → arrow press.

Context (right-click) menu

import { TkxContextMenu } from 'tekivex-ui';

<TkxContextMenu items={[
  { label: 'Copy',   onSelect: copy },
  { label: 'Paste',  onSelect: paste },
  { type: 'separator' },
  { label: 'Delete', onSelect: del, variant: 'danger' },
]}>
  <div>Right-click anywhere in this region</div>
</TkxContextMenu>

Disabled items

<TkxMenuItem disabled>Cut</TkxMenuItem>

Disabled items skip during keyboard navigation and don’t fire onSelect.

Accessibility — what’s automatic

• Trigger gets aria-haspopup="menu" + aria-expanded
• Menu container: role="menu" + aria-orientation
• Each item: role="menuitem"
• Keyboard:
  • Open with ↓ or Enter on the trigger
  • ↑ / ↓ move between items
  • → opens submenu, ← closes
  • Enter / Space select; Escape closes
  • First-letter type-ahead jumps to matching items
• Focus returns to the trigger on close

Props

TkxMenu

Prop	Type	Required	Description
trigger	ReactElement	yes	The element that opens the menu.
placement	'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'		Defaults to bottom-start.
children	ReactNode	yes	TkxMenuItem / TkxMenuSeparator / submenus.

TkxMenuItem

Prop	Type	Required	Description
onSelect	() => void		Activation handler.
shortcut	string		Visual-only shortcut hint.
variant	'default' | 'danger'		Danger renders red.
disabled	boolean
icon	ReactNode		Leading icon.

Source

src/components/TkxMenu.tsx