Stalk UI

Component

DropdownMenu

Displays a keyboard-accessible menu of actions from a trigger.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/dropdown-menu

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<DropdownMenu.Root>
  <DropdownMenu.Trigger>Open menu</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Edit</DropdownMenu.Item>
    <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>
Theme
<DropdownMenu.Root>
  <DropdownMenu.Trigger>Project</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Label>Project</DropdownMenu.Label>
    <DropdownMenu.Item>
      Rename<DropdownMenu.Shortcut>⌘R</DropdownMenu.Shortcut>
    </DropdownMenu.Item>
    <DropdownMenu.Item>
      Archive<DropdownMenu.Shortcut>⌘E</DropdownMenu.Shortcut>
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>
Theme
<DropdownMenu.Root>
  <DropdownMenu.Trigger>View</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.CheckboxItem defaultChecked>Show toolbar</DropdownMenu.CheckboxItem>
    <DropdownMenu.CheckboxItem>Show sidebar</DropdownMenu.CheckboxItem>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`container``HTMLElement \null`No-
PropTypeRequiredDefaultDescription
`inset``boolean`No-Reserves indicator space so the item aligns with checkbox/radio items.
PropTypeRequiredDefaultDescription
`inset``boolean`No--

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`inset``true`, `false`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/dropdown-menu.json`
  • Recipe: `dropdownMenu`
  • Files: `src/components/ui/dropdown-menu.tsx`