Skip to content
Borneo Design System

Dropdown Menu

Stable

A list of commands opened from a button. Menus run actions — they do not hold a value. Anything that stores a selection belongs in a Select.

Added in v1.2.0 · import from "@borneo/react"

Interactive previewPermalink to this section

Open the menu and use the arrow keys. Typing a letter jumps to the matching item, as in a native menu.

Align
Trigger
Destructive item
dropdown-menu-preview.tsx
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <IconButton label="Project actions" icon={<MoreHorizontal />} />
  </DropdownMenuTrigger>

  <DropdownMenuContent align="end">
    <DropdownMenuItem shortcut="⌘E">
      <Pencil />
      Rename
    </DropdownMenuItem>
    <DropdownMenuItem shortcut="⌘D">
      <Copy />
      Duplicate
    </DropdownMenuItem>

    <DropdownMenuSeparator />

    <DropdownMenuItem destructive>
      <Trash2 />
      Delete project
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

AnatomyPermalink to this section

Rename⌘E
Delete project

Item typesPermalink to this section

Commands, checkable options, exclusive choices and submenus — all sharing one keyboard model.

Commands

The default

Checkboxes and radios

Stays open while toggling

Submenu

One level only

Disabled item

Reason in the label

Related components