UILab

Context Menu

Displays a menu of actions triggered by a right click.

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,

Usage

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "uilab-core"
<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Examples

Use ContextMenuSub to nest secondary actions.

"use client"

import {
  ContextMenu,
  ContextMenuContent,

Icons

Combine icons with labels for quick scanning.

"use client"

import {
  ContextMenu,
  ContextMenuContent,

Groups

Group related actions and separate them with dividers.

"use client"

import {
  ContextMenu,
  ContextMenuContent,

Checkboxes

Use ContextMenuCheckboxItem for toggles.

"use client"

import {
  ContextMenu,
  ContextMenuCheckboxItem,

Radios

Use ContextMenuRadioItem for exclusive choices.

"use client"

import * as React from "react"
import {
  ContextMenu,

On this page