Skip to content
Components / Overlays

Dropdown menu

A small list of actions for one record.

@fabrials/ui
Loading state

Installation

  1. Import the control from @fabrials/ui, after setting the app up.

    TypeScript
    import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@fabrials/ui";
  2. Or install it under shadcn's name, so code that imports @/components/ui/dropdown-menu gets this control. See shims.

    npx shadcn@latest add @fabrials/dropdown-menu

API reference

Prop / exportTypeDescription
variantdefault | destructivedestructive marks a dangerous item.
DropdownMenuContent keepMountedbooleanKeep the menu in the DOM, hidden, while it is closed.

Behavior

Open it from a button that names the record. Do not hide the only primary action in the menu.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.