Interaction

DropdownMenu

A compact actions menu for navs, profile menus and table rows.

Component

16

Import

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@swirski/ui";

Composition

DropdownMenu
|-- DropdownMenuTrigger
`-- DropdownMenuContent
    |-- DropdownMenuItem
    |-- DropdownMenuSeparator
    `-- DropdownMenuItem

Playground

3 controls

Controls

trigger

align

dangerItem

Usage

<DropdownMenu>
  <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
  <DropdownMenuContent align="start">
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-[#FF3131]">Archive</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Props

19 generated

Prop	Type	Default	Notes
`DropdownMenu.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DropdownMenuProps.
`DropdownMenu.tone`	`'default'`	`"default"`	Generated from DropdownMenuProps.
`DropdownMenu.variant`	`'default' \| 'compact'`	`"default"`	Generated from DropdownMenuProps.
`DropdownMenuSeparator.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DropdownMenuSeparatorProps.
`DropdownMenuSeparator.tone`	`'default'`	`"default"`	Generated from DropdownMenuSeparatorProps.
`DropdownMenuSeparator.variant`	`'default' \| 'compact'`	`"default"`	Generated from DropdownMenuSeparatorProps.
`DropdownMenuContent.align`	`'start' \| 'end'`	`"start"`	Aligns the menu to the trigger.
`DropdownMenuContent.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DropdownMenuContentProps.
`DropdownMenuContent.tone`	`'default'`	`"default"`	Generated from DropdownMenuContentProps.
`DropdownMenuContent.variant`	`'default' \| 'compact'`	`"default"`	Generated from DropdownMenuContentProps.
`DropdownMenuItem.active`	`boolean`	`false`	Generated from DropdownMenuItemProps.
`DropdownMenuItem.asChild`	`boolean`	`false`	Generated from DropdownMenuItemProps.
`DropdownMenuItem.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DropdownMenuItemProps.
`DropdownMenuItem.tone`	`'default'`	`"default"`	Generated from DropdownMenuItemProps.
`DropdownMenuItem.variant`	`'default' \| 'compact'`	`"default"`	Generated from DropdownMenuItemProps.
`DropdownMenuTrigger.asChild`	`boolean`	`false`	Generated from DropdownMenuTriggerProps.
`DropdownMenuTrigger.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DropdownMenuTriggerProps.
`DropdownMenuTrigger.tone`	`'default'`	`"default"`	Generated from DropdownMenuTriggerProps.
`DropdownMenuTrigger.variant`	`'default' \| 'compact'`	`"default"`	Generated from DropdownMenuTriggerProps.
`DropdownMenuTrigger`	`ButtonHTMLAttributes<HTMLButtonElement>`	`-`	Button props forwarded to the trigger.
`DropdownMenuItem`	`ButtonHTMLAttributes<HTMLButtonElement>`	`-`	Button props forwarded to each item.

Previous: Popover Next: Tooltip