Menu

A dropdown menu island. Click the trigger button to open/close. Items can link to URLs, show dividers, be disabled, or have a custom color. Clicking outside or pressing Escape closes the menu.

Default

import { Menu } from '@davaux/ui'

<Menu
  trigger="Open menu"
  items={[
    { label: 'Profile' },
    { label: 'Settings', href: '#' },
    { label: 'Dashboard', href: '#' },
    { divider: true, label: '' },
    { label: 'Logout', color: 'red' },
  ]}
/>

With disabled items

<Menu
  trigger="Menu with disabled"
  items={[
    { label: 'Active item' },
    { label: 'Disabled item', disabled: true },
    { label: 'Another active item' },
  ]}
/>

Position

<Menu trigger="bottom-start" position="bottom-start" items={[...]} />
<Menu trigger="bottom-end" position="bottom-end" items={[...]} />
<Menu trigger="top-start" position="top-start" items={[...]} />
<Menu trigger="top-end" position="top-end" items={[...]} />

Trigger variants

<Menu trigger="filled"  variant="filled"  items={[...]} />
<Menu trigger="light"   variant="light"   items={[...]} />
<Menu trigger="outline" variant="outline" items={[...]} />
<Menu trigger="subtle"  variant="subtle"  items={[...]} />
<Menu trigger="default" variant="default" items={[...]} />

Trigger color

<Menu trigger="blue"   variant="light" color="blue"   items={[...]} />
<Menu trigger="green"  variant="light" color="green"  items={[...]} />
<Menu trigger="red"    variant="light" color="red"    items={[...]} />
<Menu trigger="violet" variant="light" color="violet" items={[...]} />

Trigger gradient

<Menu
  trigger="Violet → Blue"
  variant="gradient"
  gradient={{ from: 'violet', to: 'blue' }}
  items={[...]}
/>

Trigger size

<Menu trigger="xs" size="xs" items={[...]} />
<Menu trigger="sm" size="sm" items={[...]} />
<Menu trigger="md" size="md" items={[...]} />
<Menu trigger="lg" size="lg" items={[...]} />
<Menu trigger="xl" size="xl" items={[...]} />

Props

PropTypeDefaultDescription
triggerstring'Menu'Trigger button label
itemsMenuItemDef[][]Array of menu item definitions
positionstring'bottom-start'Dropdown position relative to trigger
disabledboolean—Prevents the menu from opening
variant'filled' | 'light' | 'outline' | 'subtle' | 'transparent' | 'white' | 'default' | 'gradient''default'Visual style of the trigger button
colorstring—Theme color for the trigger button
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'compact-xs' | …—Size of the trigger button
radius'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'default' | number—Border-radius of the trigger button
gradient{ from: string; to: string; deg?: number }—Gradient definition; used when variant="gradient"
fullWidthboolean—Stretches the trigger button to fill its container

MenuItemDef

FieldTypeDescription
labelstringDisplay text
hrefstringWhen set, renders the item as an <a>
disabledbooleanDimmed and non-interactive
dividerbooleanRenders a horizontal separator instead of a label
colorstringTheme color applied to the item label