Dropdown menu

In FORMA

• Liegt in kit/arc/dropdown-menu und ist über @/forma/arc/dropdown-menu/dropdown-menu erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.
• Das Kit nutzt ihn als DropdownMenu aus @/forma/ui/dropdown-menu — mit shadcns API, damit Module, Blöcke und Apps unverändert bleiben; die Charakter-Achsen der Richtung liegen darüber.

When to use

• 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.

When not to use

• 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.

Usage

import { DropdownMenu } from "@/forma/arc/dropdown-menu/dropdown-menu";
import { Pencil, Copy, Trash2 } from "@/forma/icons";

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 },
      ]}
    />
  );
}

API reference

DropdownMenu

A labelled trigger that opens a Radix menu with a single highlight gliding between items.

Keyboard interactions

Accessibility

• 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.

Motion

• 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.

Responsive behavior

• 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.

Performance

• 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

• 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.

Related

• Split button: A primary action with a menu of nearby alternatives.
• Context menu: Secondary actions kept close to the selected object.
• User menu: Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.
• Popover: A small anchored surface for contextual information.

Guidance for AI tools

Dropdown menu: A focused list of actions anchored to a trigger. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt