Dropdown menu
A focused list of actions anchored to a trigger.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- A list of commands behind a labelled button, such as Rename, Duplicate, and Delete.
- Row or card actions where a visible trigger is clearer than right-click.
- Short grouped menus with separators and one destructive item at the end.
- Use split-button when one command is the default.
- Use context-menu for right-click actions on content.
- Use user-menu for the account menu, and command-palette for searching many commands.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { DropdownMenu } from 'animui/dropdown-menu';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { DropdownMenu } from "animui/dropdown-menu";import { Pencil, Copy, Trash2 } from "lucide-react"; export function ProjectActions() { return ( <DropdownMenu label="Actions" items={[ { label: "Rename", icon: <Pencil size={15} />, onSelect: rename }, { label: "Duplicate", icon: <Copy size={15} />, onSelect: duplicate }, { label: "Delete", icon: <Trash2 size={15} />, onSelect: remove, destructive: true, separatorBefore: true }, ]} /> );}DropdownMenu
A labelled trigger that opens a Radix menu with a single highlight gliding between items.
PropTypeDefaultDescription
labelRequiredstring–Trigger text. A new label rises in while the trigger width springs.itemsRequiredDropdownItem[]–Items: { label, onSelect?, disabled?, icon?, destructive?, separatorBefore? }. Labels double as keys, so keep them unique.iconReactNode–Leading icon in the trigger.- EnterorSpaceorArrowDown
- Opens the menu from the trigger.
- ArrowDownorArrowUp
- Moves between items, looping at the ends.
- HomeorEnd
- Jumps to the first or last item.
- Escape
- Closes the menu and returns focus to the trigger.
- Built on Radix DropdownMenu: the trigger gets aria-haspopup and aria-expanded, items get menuitem roles and typeahead.
- Icons and the highlight are aria-hidden; destructive items are marked by color and should say what they destroy.
- Disabled items are skipped by the keyboard.
- The highlight glides between items on a snappy spring for the pointer and jumps instantly for the keyboard.
- The menu scales in from the trigger and items fade in with a short stagger.
- Reduced motion removes the menu transform and highlight glide, keeping a quick opacity fade.
- The trigger label ellipsizes within max-width 100%, so it shrinks inside narrow toolbars instead of overflowing.
- The menu uses Radix collision handling with 12px padding and a 12rem minimum width, flipping away from viewport edges.
- Hover styles apply only on fine pointers; touch taps select without a stuck highlight.
- Menu content renders in a portal only while open; items are not virtualized, so keep lists short.
- The menu has a translucent backdrop blur, which drops to a solid surface under prefers-reduced-transparency.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Default choice for a list of commands behind a button. Use split-button when one command is the default, and context-menu for right-click on content.
- Group items with separatorBefore; put destructive items last.
- Items are data, not children, so build the array from your actions.
The full library index for assistants is at /llms.txt.