Dropdown

Action menu anchored to a trigger. Items support icons, disabled states, and separators. Portal-rendered to avoid overflow clipping.

Import

tsx

import { Dropdown } from '@velocityuikit/velocityui'

Preview

With icons and separator

With disabled item

Props

Prop	Type	Default	Description
trigger	`ReactNode`	—	The element that opens the menu when clicked.
items	`{ label: string; icon?: ReactNode; onClick?: () => void; disabled?: boolean; separator?: boolean }[]`	—	Array of menu items. An item with separator: true renders a horizontal divider instead of a button.
placement	`'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'`	`'bottom-start'`	Menu placement relative to the trigger.

Examples

Basic menu

tsx

import { Dropdown, Button } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <Dropdown
      trigger={<Button variant="outline">Actions ▾</Button>}
      items={[
        { label: 'Edit' },
        { label: 'Duplicate' },
        { separator: true },
        { label: 'Delete', onClick: () => alert('Deleted') },
      ]}
    />
  )
}

With disabled item

tsx

import { Dropdown, Button } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <Dropdown
      trigger={<Button>Options</Button>}
      items={[
        { label: 'View details' },
        { label: 'Export', disabled: true },
        { label: 'Archive' },
      ]}
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */