Context Menu

A menu that appears at the pointer on right click or long press.

Right click here

import {
  ContextMenu,
  ContextMenuItem,
  ContextMenuPopup,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "mako-ui/components/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuItem>Back</ContextMenuItem>
        <ContextMenuItem>Forward</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Reload</ContextMenuItem>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

Usage

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuGroup,
  ContextMenuGroupLabel,
  ContextMenuItem,
  ContextMenuLinkItem,
  ContextMenuPopup,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubPopup,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "mako-ui/components/context-menu"

<ContextMenu>
  <ContextMenuTrigger className="flex h-32 items-center justify-center rounded-lg border border-dashed">
    Right click here
  </ContextMenuTrigger>
  <ContextMenuPopup>
    <ContextMenuItem>Back</ContextMenuItem>
    <ContextMenuItem>Forward</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuLinkItem render={<Link href="/docs" />}>
      Documentation
    </ContextMenuLinkItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>More tools</ContextMenuSubTrigger>
      <ContextMenuSubPopup>
        <ContextMenuItem>Inspect</ContextMenuItem>
        <ContextMenuItem>View source</ContextMenuItem>
      </ContextMenuSubPopup>
    </ContextMenuSub>
  </ContextMenuPopup>
</ContextMenu>

API Reference

ContextMenuTrigger

An area that opens the menu on right click or long press. Renders a <div> element.

ContextMenuPopup

Popup container that displays the menu content at the pointer.

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Side of the anchor to position the popup
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the anchor
`sideOffset`	`number`	`4`	Distance from the anchor in pixels
`alignOffset`	`number`	-	Offset along the alignment axis
`portalProps`	`PortalProps`	-	Props forwarded to the internal portal (`keepMounted`, `container`, etc.)

ContextMenuItem

Individual menu item.

Prop	Type	Default	Description
`inset`	`boolean`	-	Adds left padding to align with items that have icons
`variant`	`"default" \| "destructive"`	`"default"`	Controls the item styling

Using inset: When mixing items with and without icons, use inset on icon-less items to maintain alignment:

<ContextMenuItem><Pencil /> Edit</ContextMenuItem>
<ContextMenuItem inset>Properties</ContextMenuItem>

ContextMenuLinkItem

Link menu item for navigation. LinkItem renders a native <a> when you pass href. Styled like ContextMenuItem.

Prop	Type	Default	Description
`inset`	`boolean`	-	Adds left padding to align with items that have icons
`variant`	`"default" \| "destructive"`	`"default"`	Controls the item styling
`closeOnClick`	`boolean`	`true`	Whether the menu closes when the link is clicked

If you were using ContextMenuItem render={<Link href="..." />}, migrate to ContextMenuLinkItem but keep render — do not replace it with href alone when using a router Link.

<ContextMenuLinkItem render={<Link href="/docs" />}>Docs</ContextMenuLinkItem>

Use href only for plain anchor links:

<ContextMenuLinkItem href="/docs">Docs</ContextMenuLinkItem>

ContextMenuCheckboxItem

Checkbox menu item.

Prop	Type	Default	Description
`variant`	`"default" \| "switch"`	`"default"`	Display style - `switch` shows a toggle switch indicator

ContextMenuRadioGroup

Groups radio menu items.

ContextMenuRadioItem

Radio menu item.

ContextMenuGroupLabel

Label for a menu group.

Prop	Type	Default	Description
`inset`	`boolean`	-	Adds left padding to align with items that have icons

ContextMenuSeparator

Visual separator between menu items.

ContextMenuShortcut

Displays keyboard shortcut text. Custom component.

ContextMenuSub

Submenu container.

ContextMenuSubTrigger

Trigger for opening a submenu.

Prop	Type	Default	Description
`inset`	`boolean`	-	Adds left padding to align with items that have icons

ContextMenuSubPopup

Popup for submenu content.

Prop	Type	Default	Description
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment relative to the trigger
`sideOffset`	`number`	`0`	Distance from the trigger in pixels
`alignOffset`	`number`	`-5`	Offset along the alignment axis. Defaults to `-5` when `align` is not `"center"`

Examples

With Link

Right click here

import {
  ContextMenu,
  ContextMenuLinkItem,
  ContextMenuPopup,
  ContextMenuTrigger,
} from "mako-ui/components/context-menu";
import Link from "next/link";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuLinkItem render={<Link href="/docs" />}>
          Docs
        </ContextMenuLinkItem>
        <ContextMenuLinkItem render={<Link href="/docs/get-started" />}>
          Get Started
        </ContextMenuLinkItem>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

Right click here

import {
  ContextMenu,
  ContextMenuItem,
  ContextMenuPopup,
  ContextMenuSub,
  ContextMenuSubPopup,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "mako-ui/components/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuItem>Cut</ContextMenuItem>
        <ContextMenuItem>Copy</ContextMenuItem>
        <ContextMenuItem>Paste</ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
          <ContextMenuSubPopup>
            <ContextMenuItem>Email link</ContextMenuItem>
            <ContextMenuItem>Messages</ContextMenuItem>
            <ContextMenuItem>Notes</ContextMenuItem>
          </ContextMenuSubPopup>
        </ContextMenuSub>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

With Checkbox

Right click here

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuPopup,
  ContextMenuTrigger,
} from "mako-ui/components/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuCheckboxItem defaultChecked>
          Show hidden files
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem>Compact view</ContextMenuCheckboxItem>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

With Group Label

Right click here

import {
  ContextMenu,
  ContextMenuGroup,
  ContextMenuGroupLabel,
  ContextMenuItem,
  ContextMenuPopup,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "mako-ui/components/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuGroup>
          <ContextMenuGroupLabel>File</ContextMenuGroupLabel>
          <ContextMenuItem>Rename</ContextMenuItem>
          <ContextMenuItem>Duplicate</ContextMenuItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuGroup>
          <ContextMenuGroupLabel>Share</ContextMenuGroupLabel>
          <ContextMenuItem>Send copy</ContextMenuItem>
          <ContextMenuItem>Export</ContextMenuItem>
        </ContextMenuGroup>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

With Icons

Right click here

import { ShareIcon } from "lucide-react";
import {
  ContextMenu,
  ContextMenuItem,
  ContextMenuPopup,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "mako-ui/components/context-menu";
import { Copy } from "mako-ui/icons/copy";
import { Pencil } from "mako-ui/icons/pencil";
import { Trash } from "mako-ui/icons/trash";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuItem>
          <Pencil aria-hidden="true" />
          Edit
          <ContextMenuShortcut>⌘E</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Copy aria-hidden="true" />
          Copy
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <ShareIcon aria-hidden="true" />
          Share
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <Trash aria-hidden="true" />
          Delete
          <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

With Radio Group

Right click here

import {
  ContextMenu,
  ContextMenuPopup,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuTrigger,
} from "mako-ui/components/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuRadioGroup defaultValue="grid">
          <ContextMenuRadioItem value="list">List</ContextMenuRadioItem>
          <ContextMenuRadioItem value="grid">Grid</ContextMenuRadioItem>
          <ContextMenuRadioItem value="gallery">Gallery</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuPopup>
    </ContextMenu>
  );
}

With Switch

ContextMenuCheckboxItem supports a variant="switch" prop that displays a decorative switch indicator instead of a checkmark. This is a purely visual variant — the component remains a checkbox item with the same functionality.

Right click here

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuPopup,
  ContextMenuTrigger,
} from "mako-ui/components/context-menu";

export default function Particle() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-32 w-full max-w-sm items-center justify-center rounded-lg border border-dashed text-muted-foreground text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuPopup>
        <ContextMenuCheckboxItem defaultChecked variant="switch">
          Auto save
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem variant="switch">
          Show preview
        </ContextMenuCheckboxItem>
      </ContextMenuPopup>
    </ContextMenu>
  );
}