Dropdown

A contextual menu that appears when triggered, containing a list of actions or options.

Examples

Basic Usage

A simple dropdown with icons and actions.

Dropdown Example

import { Button, Dropdown } from '@creo-team/buzz-ui/client'

const items = [
	{
		key: 'profile',
		label: 'Profile',
		icon: <UserIcon className="h-4 w-4" />,
		onClick: () => console.log('Profile clicked'),
	},
	{
		key: 'settings',
		label: 'Settings',
		icon: <SettingsIcon className="h-4 w-4" />,
		onClick: () => console.log('Settings clicked'),
	},
	'separator',
	{
		key: 'logout',
		label: 'Sign Out',
		variant: 'destructive',
		onClick: () => console.log('Sign out'),
	},
]

export default function Example() {
	return (
		<Dropdown
			trigger={<Button>Open Menu</Button>}
			items={items}
		/>
	)
}

Positioning

Control where the dropdown appears relative to the trigger.

API Reference

Prop	Type	Default	Description
`trigger`*	`React.ReactElement`	—	Element that triggers the dropdown
`items`*	`(DropdownItem \| 'separator')[]`	—	Array of menu items and separators
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment of dropdown relative to trigger
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Side of trigger where dropdown appears

Full API: /components/dropdown/api