Dropdown Menu : composant React pour shadcn/ui

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

dropdown-menu.tsx

'use client';import { Button } from '@/components/ui/button';import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuItem,  DropdownMenuSeparator,  DropdownMenuTrigger,} from '@/components/ui/dropdown-menu';export default function Demo() {  return (    <DropdownMenu>      <DropdownMenuTrigger render={<Button variant="outline" />}>Open menu</DropdownMenuTrigger>      <DropdownMenuContent>        <DropdownMenuItem>Profile</DropdownMenuItem>        <DropdownMenuItem>Settings</DropdownMenuItem>        <DropdownMenuSeparator />        <DropdownMenuItem>Log out</DropdownMenuItem>      </DropdownMenuContent>    </DropdownMenu>  );}

Animation

Le menu grandit depuis son déclencheur en 180 ms (120 ms en sortie). La navigation au clavier entre les items est instantanée.

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 dropdown-menu

Ou depuis le paquet npm :

import { DropdownMenu } from '@whoa-studio/ui/dropdown-menu';

Exports : DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator.