Context Menu

Un menu ouvert par clic droit.

BetaWhoa UI est en bêta : certains éléments peuvent encore changer. Un bug ? Écrivez-moi à hello@ugolin-olle.com.

Right click here

context-menu.tsx

'use client';import {  ContextMenu,  ContextMenuContent,  ContextMenuItem,  ContextMenuTrigger,} from '@/components/ui/context-menu';export default function Demo() {  return (    <ContextMenu>      <ContextMenuTrigger className="flex h-32 w-72 items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">        Right click here      </ContextMenuTrigger>      <ContextMenuContent>        <ContextMenuItem>Back</ContextMenuItem>        <ContextMenuItem>Reload</ContextMenuItem>        <ContextMenuItem>Inspect</ContextMenuItem>      </ContextMenuContent>    </ContextMenu>  );}

Animation

Le menu grandit depuis le point de clic (--transform-origin) en 180 ms ; les items ne bougent pas.

Les jetons et les règles communes sont décrits sur la page Motion.

Installation

Le composant fait partie des primitives shadcn/ui sur Base UI.

bunx --bun shadcn@latest add context-menu

Ou depuis le paquet npm :

import { ContextMenu } from '@whoa-studio/ui/context-menu';

Exports : ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem.