Skip to content
FelicityUI

Dropdown Menu

Action menu from a trigger.

Loading dropdown-menu…

Installation

terminal
npx felicityui add dropdown-menu --platform react

Usage

example.tsx
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="outline">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuItem>Archive</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Composition

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    └── DropdownMenuItem

Composition and usage follow Felicity-native APIs. Roles align with the public component catalog at docs/references/felicity-component-catalog.md.

Default

Compact menu anchored to a trigger — flat items, no floating SaaS shadow.

Loading dropdown-menu…

API Reference

PropTypeDefaultDescription
classNamestring—Additional classes.

Accessibility

WCAG 2.2 AA

  • Native semantics and keyboard support.
  • Visible focus indicator.

Platform notes

React

Native HTML with Felicity semantic tokens. Paper/ink surfaces, copper accent sparingly, hairline borders — not Radix/shadcn runtime.

  • Server Component compatible unless marked use client.
  • Uses data-slot attributes for anatomy.