Dropdown Menu

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#

Code
import { DropdownMenu } from "@medusajs/ui"

Code
1<DropdownMenu>2  <DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>3  <DropdownMenu.Content>4    <DropdownMenu.Item>Edit</DropdownMenu.Item>5    <DropdownMenu.Item>Add</DropdownMenu.Item>6    <DropdownMenu.Item>Delete</DropdownMenu.Item>7  </DropdownMenu.Content>8</DropdownMenu>

API Reference#

DropdownMenu#

This component is based on the Radix UI Dropdown Menu primitive.

DropdownMenu.Trigger#

This component is based on the Radix UI Dropdown Menu Trigger primitive.

DropdownMenu.Content#

This component is based on the Radix UI Dropdown Menu Content primitive.

DropdownMenu.Item#

This component is based on the Radix UI Dropdown Menu Item primitive.

DropdownMenu.Shortcut#

This component is based on the span element and supports all of its props

DropdownMenu.Hint#

This component is based on the span element and supports all of its props

DropdownMenu.RadioGroup#

This component is based on the Radix UI Dropdown Menu RadioGroup primitive.

DropdownMenu.RadioItem#

This component is based on the Radix UI Dropdown Menu RadioItem primitive.

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 ⌘E and ⌘D shortcuts to trigger the actions of the dropdown items.