primitives

DropdownMenu

Popover with a list of actions, anchored to a trigger. Use for kebab menus, account menus, table-row actions. For *selecting a value* use a Select / Combobox.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/dropdown-menu.json

Or import from the workspace package:

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuShortcut, DropdownMenuSub } from "@8maverik8/design";

Examples

Account menu

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Account</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>jane@oapps.io</DropdownMenuLabel>
    <DropdownMenuItem>
      <Settings />
      Settings
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">
      <LogOut />
      Sign out
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Guidelines

Use `variant="destructive"` on `DropdownMenuItem` for delete-style actions and place them at the bottom, separated by a separator.
Use a DropdownMenu for choosing a value (e.g. a status field).A menu "runs" actions; a Select changes data. Mixing them confuses keyboard semantics.
Provide `DropdownMenuShortcut` text when the action has a global keyboard binding.