← Frontic UI
dropdown-menu

Dropdown Menu

A menu that opens from a button, with actions, checkbox and radio items, labelled groups and destructive entries, such as account or sort options.

States: Default, Focus, Disabled

Parts

PartFileDoes
DropdownMenuDropdownMenu.vueGroups all parts of the dropdown menu.
DropdownMenuCheckboxItemDropdownMenuCheckboxItem.vueLets the user switch an option on or off from the menu.
DropdownMenuContentDropdownMenuContent.vueHolds the entries the dropdown menu shows while open.
DropdownMenuGroupDropdownMenuGroup.vueGroups related entries of the dropdown menu.
DropdownMenuItemDropdownMenuItem.vueHolds one action the user can pick from the dropdown menu.
DropdownMenuLabelDropdownMenuLabel.vueLabels a group of entries in the dropdown menu.
DropdownMenuPortalDropdownMenuPortal.vuePlaces the menu content above the rest of the page.
DropdownMenuRadioGroupDropdownMenuRadioGroup.vueGroups radio items so the user can pick exactly one.
DropdownMenuRadioItemDropdownMenuRadioItem.vueLets the user choose one option from a group in the menu.
DropdownMenuSeparatorDropdownMenuSeparator.vueSeparates groups of entries in the dropdown menu.
DropdownMenuShortcutDropdownMenuShortcut.vueShows the keyboard shortcut for a menu item.
DropdownMenuSubDropdownMenuSub.vueGroups a submenu trigger with the nested menu it opens.
DropdownMenuSubContentDropdownMenuSubContent.vueHolds the entries the submenu shows while open.
DropdownMenuSubTriggerDropdownMenuSubTrigger.vueOpens a submenu from an item of the dropdown menu.
DropdownMenuTriggerDropdownMenuTrigger.vueOpens and closes the dropdown menu.

Anatomy

<DropdownMenu>
  <DropdownMenuTrigger />
  <DropdownMenuContent>
    <DropdownMenuLabel />
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem />
      <DropdownMenuSub>
        <DropdownMenuSubTrigger />
        <DropdownMenuSubContent>
          <DropdownMenuRadioGroup>
            <DropdownMenuRadioItem />
          </DropdownMenuRadioGroup>
        </DropdownMenuSubContent>
      </DropdownMenuSub>
    </DropdownMenuGroup>
    <DropdownMenuCheckboxItem />
    <DropdownMenuItem />
  </DropdownMenuContent>
</DropdownMenu>

Styling

PartRecipe
DropdownMenuCheckboxItemdropdown-menu-item
DropdownMenuContentdropdown-menu-content
DropdownMenuItemdropdown-menu-item
DropdownMenuLabeldropdown-menu-label
DropdownMenuRadioItemdropdown-menu-item
DropdownMenuSeparatordropdown-menu-separator
DropdownMenuShortcutdropdown-menu-shortcut
DropdownMenuSubContentdropdown-menu-sub-content
DropdownMenuSubTriggerdropdown-menu-sub-trigger

Install

Writes 16 files into components/ui/dropdown-menu/. For agents, npx @frontic/ui docs dropdown-menu prints this reference as markdown; the MCP server serves the same.

npm packages
@lucide/vue
@vueuse/core
class-variance-authority
reka-ui

API reference

Example
State