Context Menu

The Context Menu component provides a floating menu anchored to the long-press position. It supports items, checkbox items, radio items, sub-menus, labels, separators, and keyboard shortcuts. Built with React Native's Modal and Pressable for native long-press interactions.

Preview

Installation

npx novaui-cli add context-menu

Import

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
} from 'novaui-components'

Basic Usage

The Context Menu is triggered by a long-press gesture on the trigger area:

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
} from 'novaui-components'
import { View, Text } from 'react-native'

export function BasicContextMenu() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        <Text>Long press here</Text>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Forward
          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Save As...
          <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Print
          <ContextMenuShortcut>⌘P</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

With Checkbox Items

import { useState } from 'react'

export function CheckboxContextMenu() {
  const [bookmarks, setBookmarks] = useState(true)
  const [urls, setUrls] = useState(false)

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        <Text>Long press here</Text>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuLabel>View Options</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem
          checked={bookmarks}
          onPress={() => setBookmarks(!bookmarks)}
        >
          Show Bookmarks
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem
          checked={urls}
          onPress={() => setUrls(!urls)}
        >
          Show URLs
        </ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

<ContextMenu>
  <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    <Text>Long press here</Text>
  </ContextMenuTrigger>
  <ContextMenuContent className="w-56">
    <ContextMenuItem>Cut</ContextMenuItem>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Paste</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Email</ContextMenuItem>
        <ContextMenuItem>Messages</ContextMenuItem>
        <ContextMenuItem>AirDrop</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuContent>
</ContextMenu>

Props API

ContextMenu

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Trigger and content children

ContextMenuTrigger

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the long-press trigger
`className`	`string`	-	Additional CSS classes

ContextMenuContent

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ContextMenuItem

Extends React.ComponentPropsWithoutRef<typeof Pressable>:

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Adds left padding for icon alignment
`className`	`string`	-	Additional CSS classes

ContextMenuCheckboxItem

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the checkbox is checked

ContextMenuRadioItem

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the radio item is selected

ContextMenuLabel

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Adds left padding for alignment

ContextMenuSubTrigger

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Adds left padding for alignment

Best Practices

Use for secondary actions: Context menus should contain actions relevant to the pressed element
Keep it discoverable: Provide visual hints (e.g., dashed borders) that elements have context menus
Don't put primary actions here: Essential actions should be accessible without long-press
Group related items: Use separators and labels to organize actions logically
Close on action: Items automatically close the menu on press

Dropdown Menu - For button-triggered menus
Menubar - For app-level menu bars

Continue reading

Getting Started Components Overview Popular: Dialog SEO Playbook