Components

Dropdown menu

An action menu that springs out of its button — icons, shortcuts, sections, separators and destructive items, with the same liquid highlight.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

React

import { DropdownMenu, Button } from '@vizzele/react';

<DropdownMenu
  items={[
    { type: 'label', label: 'Project' },
    { label: 'Rename', icon: <PencilIcon />, shortcut: 'R', onSelect: rename },
    { label: 'Duplicate', icon: <CopyIcon />, shortcut: '⌘D', onSelect: duplicate },
    { type: 'separator' },
    { label: 'Delete', icon: <TrashIcon />, danger: true, onSelect: remove },
  ]}
>
  {(props) => <Button {...props} variant="holo">Actions</Button>}
</DropdownMenu>

Props

Prop	Type	Default	Description
`items`	`MenuItem[]`	—	{ label, icon?, shortcut?, onSelect?, disabled?, danger? } \| { type: 'separator' } \| { type: 'label', label }
`children`	`(triggerProps) => ReactNode`	—	Render your trigger and spread the props on it.
`placement`	`Placement`	`'bottom'`	Preferred side.
`label`	`string`	—	Accessible name of the menu (defaults to the trigger text).

Usage

Props

Accessibility