Component

Dropdown Menu

Place secondary actions in a compact menu with roving focus, typeahead, disabled states, and escape handling.

Usage

Import the component entry and start with its smallest complete example.

Import

import { DropdownMenu } from "@chitrank2050/monoline-ui/dropdown-menu"

Basic usage

<DropdownMenu>
  <DropdownMenu.Trigger asChild><Button variant="secondary">Actions</Button></DropdownMenu.Trigger>
	<DropdownMenu.Content side="bottom" align="end">
    <DropdownMenu.Label>Project</DropdownMenu.Label>
    <DropdownMenu.Item>Duplicate <DropdownMenu.Shortcut>⌘D</DropdownMenu.Shortcut></DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item destructive>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

DropdownMenu groups secondary actions that belong to one trigger and benefit from compact keyboard navigation.

Avoid when

The choices are form values, primary navigation, or important enough to remain visible without opening a menu.

Accessibility

DropdownMenu supplies menu roles, roving focus, typeahead, Escape handling, and focus restoration. Item labels must describe actions rather than destinations ambiguously.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

DropdownMenu.Triggercompound slotControl that opens the menu

DropdownMenu.Contentcompound slotPortal-mounted menu surface

DropdownMenu.Itemcompound slotSelectable action

DropdownMenu.CheckboxItem / RadioItemcompound slotsPersistent menu choices

DropdownMenu.Subcompound slotNested action group

destructivebooleanMarks an irreversible action

insetbooleanAligns copy with icon-bearing items

side"top" | "right" | "bottom" | "left"Preferred placement; flips automatically when space is limited

align"start" | "center" | "end"Alignment along the chosen side

collisionBoundaryElement | Element[]Optional clipping boundary; defaults to the viewport

collisionPaddingnumber | SideObjectMinimum space from the collision boundary; defaults to 12px

Design tokens

Theme variables this component reads for color, spacing, and motion.

--popoverCSS varMenu surface

--surface-2CSS varHighlighted and selected item

--borderCSS varMenu boundary

--destructiveCSS varDestructive actions

--z-dropdownCSS varOverlay order

Implementation

The source used by the example above, including any state it needs.

<DropdownMenu>
  <DropdownMenu.Trigger asChild><Button variant="secondary">Actions</Button></DropdownMenu.Trigger>
	<DropdownMenu.Content side="bottom" align="end">
    <DropdownMenu.Label>Project</DropdownMenu.Label>
    <DropdownMenu.Item>Duplicate <DropdownMenu.Shortcut>⌘D</DropdownMenu.Shortcut></DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item destructive>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

Compare related components or review the package and theme setup.

01ComponentPopoverComponent · ReferenceReference→02ComponentButtonComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview