Navigation

DropdownMenu

Context menu with keyboard support.

Available inreactangular

Preview

Live previewreal component

Install

TerminalBash

$ npx mcp-elements add dropdown-menu

Usage

dropdown-menu-example.tsxTSX

import { DropdownMenu, Button } from '@mcp-elements/react'

export function Example() {
  return (
    <DropdownMenu
      trigger={<Button variant="outline">Actions</Button>}
      align="start"
      items={[
        { id: 'label', type: 'label', label: 'filesystem-mcp' },
        { id: 'restart', label: 'Restart server', shortcut: '⌘R', onSelect: () => {} },
        { id: 'logs', label: 'View logs', onSelect: () => {} },
        { id: 'sep', type: 'separator', label: '' },
        { id: 'remove', label: 'Remove', onSelect: () => {} },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
`trigger *`	`React.ReactNode`	—	Element that toggles the menu when clicked
`items *`	`DropdownMenuItem[]`	—	Menu entries. Each item has an id and label, plus optional type ("item" \| "separator" \| "label"), shortcut, disabled, and onSelect
`align`	`'start' \| 'end'`	`'end'`	Horizontal alignment of the menu relative to the trigger
`className`	`string`	—	Extra classes applied to the menu content container