नया
मेनूKebab Row Actions Menu
A three-dot overflow button on a list row that opens a menu of row actions.
#menu#kebab#actions
3 फ्रेमवर्कशुरुआती
Loading…
A context menu that opens at the pointer on right-click, scoped to its own area so the native browser menu still works elsewhere.
<!--
Right-click context menu. The wrapper calls preventDefault on 'contextmenu'
only INSIDE itself, so the native browser menu keeps working everywhere else.
The menu is positioned relative to the area (left/top from the pointer), never
fixed to the viewport, so it cannot escape its container. Shown open below.
-->
<div class="relative flex min-h-44 w-full select-none items-center justify-center rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 p-6 text-center text-sm text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400">
Right-click inside this area
<div role="menu" aria-label="Actions" class="absolute left-6 top-6 z-20 min-w-44 rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
<button type="button" role="menuitem" class="flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">Cut</button>
<button type="button" role="menuitem" class="flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">Copy</button>
<button type="button" role="menuitem" class="flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">Paste</button>
<button type="button" role="menuitem" class="flex w-full items-center rounded-md px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 focus-visible:bg-red-50 focus-visible:outline-none dark:text-red-400 dark:hover:bg-red-950/40 dark:focus-visible:bg-red-950/40">Delete</button>
</div>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
itemsआवश्यक | ContextItem[] | - | रेंडर की जाने वाली आइटम की सूची। |
hint | string | 'Right-click inside this area' | Hint |
onSelect | (id: string) => void | - | यूज़र द्वारा चुने गए मेन्यू आइटम के साथ चलता है। |
The wrapper calls `preventDefault` on `contextmenu` only inside itself, and positions the menu with `left`/`top` relative to the area rather than the viewport, so it can never break the page or escape its container. Escape or any outside press closes it; arrow keys rove the items.