Context Menu
A list of options that appears when a user interacts right-clicking on a trigger element.
Anatomy
To set up the menu correctly, you’ll need to understand its anatomy and how we name its parts.
Each part includes a
data-partattribute to help identify them in the DOM.
Examples
To show the menu when a trigger element is right-clicked, use the
Menu.ContextTrigger component.
Context menus are also opened during a long-press of roughly 700ms when the
pointer is pen or touch.
import { Menu } from '@ark-ui/react'
const Basic = () => (
<Menu.Root>
<Menu.ContextTrigger>
<div style={{ width: '100%', height: '20rem', border: '1px solid lightgray' }}>
Some content
</div>
</Menu.ContextTrigger>
<Menu.Positioner>
<Menu.Content>
<Menu.Item id="search">Search</Menu.Item>
<Menu.Item id="undo">Undo</Menu.Item>
<Menu.Item id="delivery" disabled>
Delivery
</Menu.Item>
<Menu.Item id="unlink">Unlink</Menu.Item>
</Menu.Content>
</Menu.Positioner>
</Menu.Root>
)
import { Menu } from '@ark-ui/solid'
const Basic = () => (
<Menu.Root>
<Menu.ContextTrigger>
<div style={{ width: '100%', height: '20rem', border: '1px solid lightgray' }}>
Some content
</div>
</Menu.ContextTrigger>
<Menu.Positioner>
<Menu.Content>
<Menu.Item id="search">Search</Menu.Item>
<Menu.Item id="undo">Undo</Menu.Item>
<Menu.Item id="delivery" disabled>
Delivery
</Menu.Item>
<Menu.Item id="unlink">Unlink</Menu.Item>
</Menu.Content>
</Menu.Positioner>
</Menu.Root>
)
<script setup lang="ts">
import { Menu } from '@ark-ui/vue'
</script>
<template>
<Menu.Root>
<Menu.ContextTrigger>
<div :style="{ width: '100%', height: '20rem', border: '1px solid lightgray' }">
Some content
</div>
</Menu.ContextTrigger>
<Menu.Positioner>
<Menu.Content>
<Menu.Item id="search">Search</Menu.Item>
<Menu.Item id="undo">Undo</Menu.Item>
<Menu.Item id="delivery" disabled> Delivery </Menu.Item>
<Menu.Item id="unlink">Unlink</Menu.Item>
</Menu.Content>
</Menu.Positioner>
</Menu.Root>
</template>
API Reference
Item
idThe `id` of the menu item option. | string | |
asChildRender as a different element type. | boolean | |
closeOnSelectWhether the menu should be closed when the option is selected. | boolean | |
disabledWhether the menu item is disabled | boolean | |
valueTextThe textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used. | string |
Root
anchorPointThe positioning point for the menu. Can be set by the context menu trigger or the button trigger. | Point | |
aria-labelThe accessibility label for the menu | string | |
closeOnSelectWhether to close the menu when an option is selected | boolean | |
dirThe document's text/writing direction. | 'ltr' | 'rtl' | "ltr" |
getRootNodeA root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | () => Node | ShadowRoot | Document | |
highlightedIdThe `id` of the active menu item. | string | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements in the menu. Useful for composition. | Partial<{
trigger: string
contextTrigger: string
content: string
label(id: string): string
group(id: string): string
positioner: string
arrow: string
}> | |
lazyMountWhether to enable lazy mounting | boolean | false |
loopWhether to loop the keyboard navigation. | boolean | |
onExitCompleteFunction called when the animation ends in the closed state. | () => void | |
onFocusOutsideFunction called when the focus is moved outside the component | (event: FocusOutsideEvent) => void | |
onInteractOutsideFunction called when an interaction happens outside the component | (event: InteractOutsideEvent) => void | |
onOpenChangeFunction called when the menu opens or closes | (details: OpenChangeDetails) => void | |
onPointerDownOutsideFunction called when the pointer is pressed down outside the component | (event: PointerDownOutsideEvent) => void | |
onSelectFunction called when a menu item is selected. | (details: SelectionDetails) => void | |
onValueChangeCallback to be called when the menu values change (for radios and checkboxes). | (details: ValueChangeDetails) => void | |
openWhether the menu is open | boolean | |
positioningThe options used to dynamically position the menu | PositioningOptions | |
presentWhether the node is present (controlled by the user) | boolean | |
unmountOnExitWhether to unmount on exit. | boolean | false |
valueThe values of radios and checkboxes in the menu. | Record<string, string | string[]> |
Arrow
asChildRender as a different element type. | boolean |
Content
asChildRender as a different element type. | boolean |
Trigger
asChildRender as a different element type. | boolean |
ArrowTip
asChildRender as a different element type. | boolean |
ItemGroup
idThe `id` of the element that provides accessibility label to the option group | string | |
asChildRender as a different element type. | boolean |
Separator
asChildRender as a different element type. | boolean |
OptionItem
nameThe option's name as specified in menu's `context.values` object | string | |
typeWhether the option is a radio or a checkbox | 'checkbox' | 'radio' | |
valueThe value of the option | string | |
asChildRender as a different element type. | boolean | |
closeOnSelectWhether the menu should be closed when the option is selected. | boolean | |
disabledWhether the menu item is disabled | boolean | |
onCheckedChangeFunction called when the option state is changed | (checked: boolean) => void | |
valueTextThe textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used. | string |
Positioner
asChildRender as a different element type. | boolean |
TriggerItem
asChildRender as a different element type. | boolean |
ContextTrigger
asChildRender as a different element type. | boolean |
ItemGroupLabel
htmlFor | string | |
asChildRender as a different element type. | boolean |
Previous
ComboboxNext
Date Picker