New
MenusRight-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 frameworksAdvanced
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 | Type | Default | Description |
|---|---|---|---|
labelrequired | string | - | Accessible label announced while loading. |
itemsrequired | KeyItem[] | - | The array of items to render. |
onSelect | (id: string) => void | - | Fired with the menu item the user chose. |
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.