Murasaki
Components

Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@murasakijs/ui";
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

API Reference

Subcomponents

ComponentDescription
DropdownMenuThe root primitive.
DropdownMenuTriggerThe element that opens the menu. Supports asChild.
DropdownMenuContentThe menu popup. Accepts sideOffset (default 4).
DropdownMenuItemA selectable item. Accepts inset to indent it (align with items that have an icon/indicator).
DropdownMenuCheckboxItemAn item with a checkbox indicator. Accepts checked.
DropdownMenuRadioGroup / DropdownMenuRadioItemA mutually-exclusive group of items with a radio indicator.
DropdownMenuLabelA non-interactive heading. Accepts inset.
DropdownMenuSeparatorA visual divider between items or groups.
DropdownMenuShortcutRight-aligned muted text for a keyboard shortcut hint.
DropdownMenuGroupGroups related items together.
DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContentA nested submenu.
DropdownMenuPortalPortals content into document.body. Used internally by DropdownMenuContent.

Menu focus, typeahead, keyboard navigation, and overlay positioning are provided by React Aria Components.

Improve this page on GitHub

On this page