import { ComponentExample } from "@/components/ComponentExample" import { ComponentReference } from "@/components/ComponentReference" import { getOsShortcut, Kbd } from "docs-ui"

export const osShortcut = getOsShortcut()

export const metadata = { title: Dropdown Menu, }

{metadata.title}

A component for rendering dropdown menus that display a set of actions or options to users.

In this guide, you'll learn how to use the Dropdown Menu component.

Usage

import { DropdownMenu } from "@medusajs/ui"

<DropdownMenu>
  <DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Edit</DropdownMenu.Item>
    <DropdownMenu.Item>Add</DropdownMenu.Item>
    <DropdownMenu.Item>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

API Reference

<ComponentReference mainComponent="DropdownMenu" componentsToShow={[ "DropdownMenu", "DropdownMenu.Trigger", "DropdownMenu.Content", "DropdownMenu.Item", "DropdownMenu.Shortcut", "DropdownMenu.Hint", "DropdownMenu.RadioGroup", "DropdownMenu.RadioItem" ]} />

Examples

Sorting

This example shows how to display collection sorting choices using a Dropdown Menu.

Dropdown with Submenu

Disabled Items and Using Icons

Keyboard Shortcuts (with handling)

This example shows how to visually display keyboard shortcuts in the menu and handle them in your application logic.

You can use the <Kbd>{osShortcut}E</Kbd> and <Kbd>{osShortcut}D</Kbd> shortcuts to trigger the actions of the dropdown items.