Context Menu

Renders an animated context menu with spring animations and keyboard navigation. It shows a menu on right-click with nested submenus and smooth transitions. Use it to provide interactive options in a compact, visually appealing way.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/context-menu

npx layro-cli add @educlopez/context-menu

npx layro-cli add @educlopez/context-menu

bunx layro-cli add @educlopez/context-menu

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import { cn } from "@/lib/utils";
import { ChevronRightIcon } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
import type React from "react";
import {
  type ComponentProps,
  createContext,
  useContext,
  useState,
} from "react";
import { DURATION, EASE_OUT, SPRING_DEFAULT } from "@/components/smoothui/lib/animation";