नया
मेनूRight-Click Context Menu
A context menu that opens at the pointer on right-click, scoped to its own area so the native browser menu still works elsewhere.
#menu#context-menu#right-click
3 फ्रेमवर्कएडवांस्ड
Loading…
प्रीमियम एक्सेस लेंThe reference keyboard menu: wrapping arrows, Home/End, Enter/Space, Escape, and typeahead that jumps to the first matching item.
<!--
The reference keyboard menu. Arrows wrap, Home/End jump the ends, Enter/Space
activate, Escape closes, and typing a letter jumps to the first matching item
(typeahead). The typeahead needs JS; the markup and roles are below, shown open.
-->
<div class="relative inline-block">
<button type="button" aria-haspopup="menu" aria-expanded="true" class="rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Country</button>
<div role="menu" aria-label="Country" class="absolute left-0 top-[calc(100%+0.375rem)] z-20 min-w-48 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">Australia</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">Brazil</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">Canada</button>
</div>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
labelआवश्यक | string | - | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
itemsआवश्यक | KeyItem[] | - | रेंडर की जाने वाली आइटम की सूची। |
onSelect | (id: string) => void | - | यूज़र द्वारा चुने गए मेन्यू आइटम के साथ चलता है। |
This is the pattern the `role="menu"` contract promises. Arrows wrap top-to-bottom, Home/End jump the ends, Enter/Space activate, Escape closes and restores focus, and typing a letter jumps to the first item whose label starts with what you typed - the buffer clearing itself after a short pause.