DropdownMenu
Overlays

DropdownMenu

Click-to-open menu built from MenuItem and MenuDivider.

Preview

DropdownMenu

Props

DropdownMenu wraps trigger in an inline anchor span, so any component can be used as a trigger without needing to forwardRef.

DropdownMenuProps props
PropTypeDefaultDescription
triggerReactNode—The clickable element that opens the menu.
childrenReactNode—MenuItem and MenuDivider components.
placementPlacement"bottom-start"Menu placement relative to trigger.
openboolean—Controlled open state.
defaultOpenboolean—Uncontrolled initial open state.
onOpenChange(open: boolean) => void—Controlled change handler.
closeOnSelectbooleantrueClose the menu after any click inside it.
fullWidthboolean—Stretch the anchor wrapper to full width.

Examples

Basic dropdown

ImportTSX
import { DropdownMenu, MenuItem, MenuDivider, Button } from "@solarius/onset";
import { IconSettings, IconDownload, IconTrash } from "@tabler/icons-react";

<DropdownMenu trigger={<Button>Actions ▾</Button>}>
  <MenuItem
    icon={<IconSettings size={14} />}
    onClick={() => console.log("Settings")}
  >
    Settings
  </MenuItem>
  <MenuItem
    icon={<IconDownload size={14} />}
    onClick={() => console.log("Export")}
  >
    Export
  </MenuItem>
  <MenuDivider />
  <MenuItem
    icon={<IconTrash size={14} />}
    danger
    onClick={() => console.log("Delete")}
  >
    Delete
  </MenuItem>
</DropdownMenu>;

Controlled open state

ControlledTSX
const [open, setOpen] = useState(false);

<DropdownMenu
  open={open}
  onOpenChange={setOpen}
  trigger={<Button>Actions ▾</Button>}
>
  <MenuItem
    onClick={() => {
      setOpen(false);
      handleAction();
    }}
  >
    Do something
  </MenuItem>
</DropdownMenu>;

With closeOnSelect=false

Persistent menuTSX
<DropdownMenu trigger={<Button>Settings ▾</Button>} closeOnSelect={false}>
  <MenuItem onClick={() => console.log("Toggle A")}>Toggle A</MenuItem>
  <MenuItem onClick={() => console.log("Toggle B")}>Toggle B</MenuItem>
</DropdownMenu>