Context Menu
NewInstallation
npx shadcn@latest add https://uibrik.com/r/context-menu.jsonInstall the packages
npm install motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/context-menu/context-menu.tsx"use client"; // A menu that opens where you right-click (or long-press on touch) inside an // area, with the same items, submenus and keyboard control as Dropdown Menu. // Right-clicking again elsewhere moves it there. import { AnimatePresence } from "motion/react"; import { useRef, useState, type PointerEvent, type ReactNode } from "react"; import { cn } from "@/lib/utils"; import { MenuPanel, type MenuItem } from "../_overlay/menu"; import { Portal, useDismiss, useLayer } from "../_overlay/overlay"; export type { MenuItem }; export type ContextMenuProps = { /** The area that responds to right-click. */ children: ReactNode; items: readonly MenuItem[]; /** Milliseconds a touch must be held to open the menu. */ longPress?: number; onOpenChange?: (open: boolean) => void; /** Classes for the area. */ className?: string; /** Classes for the menu panel. */
Adds the files to
components/uibrik/context-menu and installs motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/context-menu.Props
ContextMenu- longPress
- Type number
- 500
- How long a touch must be held to open it.
- childrenrequired
- Type ReactNode
- –
- The area that responds to right-click.
- itemsrequired
- Type MenuItem[]
- –
- Same items as Dropdown Menu: actions, checkbox, radio, sub, label, separator.
- onOpenChange
- Type (open) => void
- –
- Called when the menu opens or closes.
- className
- Type string
- –
- Classes for the area.
- menuClassName
- Type string
- –
- Classes for the menu panel.
