nori-ui — React Native + Web components

Right-click (web) or long-press (native) triggered menu — for contextual actions on a target element.

5.6 kBgzipped

At a glance

Same compound API and menu surface as DropdownMenu — only the trigger gesture differs.
Web: right-click fires the contextmenu event. The browser's native context menu is suppressed.
Native: long-press (onLongPress) opens the menu.
Anchor: the menu is anchored to the trigger element's bounding box. True cursor-coordinate anchoring is deferred to v2.

Platform notes

Different gesture per platform

The ContextMenu.Trigger transparently handles both gestures. You write one JSX tree; nori-ui picks the right event per platform.

// Works identically on web (right-click) and native (long-press)
<ContextMenu>
    <ContextMenu.Trigger>
        <ImageCard />
    </ContextMenu.Trigger>
    <ContextMenu.Content>
        <ContextMenu.Item onSelect={() => share()}>Share</ContextMenu.Item>
    </ContextMenu.Content>
</ContextMenu>

Anatomy

Subcomponent	Role
`ContextMenu`	Root — owns open state (controlled or uncontrolled).
`ContextMenu.Trigger`	Element that opens the menu on right-click (web) / long-press (native).
`ContextMenu.Content`	The floating menu surface. `role="menu"`.
`ContextMenu.Item`	Interactive menu item. `role="menuitem"`.
`ContextMenu.Separator`	Visual and semantic divider. `role="separator"`.
`ContextMenu.Label`	Non-interactive section heading. Muted small-caps.

Open state — `open`, `defaultOpen`, `onOpenChange`

// Uncontrolled
<ContextMenu>
    <ContextMenu.Trigger><View>...</View></ContextMenu.Trigger>
    <ContextMenu.Content>...</ContextMenu.Content>
</ContextMenu>
 
// Controlled
const [open, setOpen] = useState(false);
 
<ContextMenu open={open} onOpenChange={setOpen}>
    <ContextMenu.Trigger><View>...</View></ContextMenu.Trigger>
    <ContextMenu.Content>...</ContextMenu.Content>
</ContextMenu>

Accessibility

Trigger gets aria-haspopup="menu" and aria-expanded automatically.
Content container has role="menu".
Each item has role="menuitem" and aria-disabled when disabled.
Web keyboard navigation (same as DropdownMenu): ArrowDown/Up, Home/End, Enter/Space, Escape.

Props

ContextMenu

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled). @defaultValue false
`onOpenChange`	`(open: boolean) => void`	—	Fires with the new open state.
`open`	`boolean`	—	Controlled open state.

Wraps the element that the user right-clicks (web) or long-presses (native) to open the menu. Accepts children (the element to clone) and an optional asChild to render a custom root instead of the default View wrapper. Adds aria-haspopup="menu" and aria-expanded to the cloned element automatically.

ContextMenu.Content

The floating menu surface. Accepts children (ContextMenu.Item, ContextMenu.Separator, ContextMenu.Label) and an optional className. Has role="menu" on web. On native it renders inside an RN Modal with a tap-outside-to-close backdrop.

ContextMenu.Item

Prop	Type	Default	Description
`className`	`string`	—	—
`destructive`	`boolean`	`false`	Renders the item in a danger/destructive tone.
`disabled`	`boolean`	`false`	Prevents interaction and dims the item visually.
`icon`	`ReactNode`	—	Leading icon node.
`onSelect`	`() => void`	—	Fired when the item is selected. Also closes the menu.
`shortcut`	`string`	—	Keyboard shortcut hint shown on the trailing edge. Purely presentational — web only, no function key binding.
`testID`	`string`	—	—

ContextMenu.Separator

Prop	Type	Default	Description
`className`	`string`	—	—
`testID`	`string`	—	—

ContextMenu.Label

Prop	Type	Default	Description
`className`	`string`	—	—
`testID`	`string`	—	—

ContextMenu

At a glance

Preview

Platform notes

Anatomy

Open state — `open`, `defaultOpen`, `onOpenChange`

Accessibility

Props

ContextMenu

ContextMenu.Trigger

ContextMenu.Content

ContextMenu.Item

ContextMenu.Separator

ContextMenu.Label

On this page