Faber UI
Components

ContextMenu

A right-click menu for contextual actions.

ContextMenu is built on the Base UI Menu primitive. It displays a menu of actions when the user right-clicks a trigger element.

Installation

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/context-menu.json

Usage

typescript
"use client";

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

export default function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>Right click here</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Back</ContextMenuItem>
        <ContextMenuItem>Forward</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

Examples

Default

Right click here

With checkbox items

Right click here

API

Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.

PartBuilt onProps
ContextMenudata-slot="context-menu"ContextMenu.RootBase UI—
ContextMenuPortaldata-slot="context-menu-portal"ContextMenu.PortalBase UI—
ContextMenuTriggerdata-slot="context-menu-trigger"ContextMenu.TriggerBase UI—
ContextMenuContentdata-slot="context-menu-content"ContextMenu.PopupBase UI
  • align? = "start"ContextMenu.Positioner["align"]
  • alignOffset? = 4ContextMenu.Positioner["alignOffset"]
  • side? = "inline-end"ContextMenu.Positioner["side"]
  • sideOffset? = 0ContextMenu.Positioner["sideOffset"]
ContextMenuGroupdata-slot="context-menu-group"ContextMenu.GroupBase UI—
ContextMenuLabeldata-slot="context-menu-label"ContextMenu.GroupLabelBase UI
  • inset?boolean
ContextMenuItemdata-slot="context-menu-item"ContextMenu.ItemBase UI
  • inset?boolean
  • variant? = "default""default" | "destructive"
ContextMenuSubdata-slot="context-menu-sub"ContextMenu.SubmenuRootBase UI—
ContextMenuSubTriggerdata-slot="context-menu-sub-trigger"ContextMenu.SubmenuTriggerBase UI
  • inset?boolean
ContextMenuSubContentdata-slot="context-menu-sub-content"ContextMenuContentFaber UI—
ContextMenuCheckboxItemdata-slot="context-menu-checkbox-item"ContextMenu.CheckboxItemBase UI
  • inset?boolean
ContextMenuRadioGroupdata-slot="context-menu-radio-group"ContextMenu.RadioGroupBase UI—
ContextMenuRadioItemdata-slot="context-menu-radio-item"ContextMenu.RadioItemBase UI
  • inset?boolean
ContextMenuSeparatordata-slot="context-menu-separator"ContextMenu.SeparatorBase UI—
ContextMenuShortcutdata-slot="context-menu-shortcut"<span>HTML—

Changelog

  1. v0.3.0Popover, DropdownMenu, ContextMenu, Menubar, Select, Combobox, HoverCard, Tooltip, Dialog and AlertDialog enter and exit with interruptible transitions on the kit easing tokens, and tw-animate-css is no longer a depen…minor
  2. v0.3.0ContextMenu highlights a submenu trigger while its submenu is open.patch
  3. v0.1.0Restore open and close animations on every menu-family popup.patch
Full ContextMenu history

Last updated on

On this page