Dropdown

Stable

This component has limited functionality on the server side. In Next.js, add "use client" at the top to make it work.

A flexible dropdown menu component for displaying a list of actions or options.

Import

TypeScript React

import { Dropdown } from "laxod";

The simplest dropdown with a button trigger and basic items.

Add icons to menu items for better visual clarity.

Mark dangerous actions with the destructive property for visual distinction.

Disable specific menu items to prevent interaction.

Control where the dropdown appears relative to the trigger.

Prop	Type	Default	Description
items	DropdownItem[]	-	Array of menu items to display
trigger	ReactNode	-	Element that opens the dropdown
onSelect	(value: string) => void	-	Callback when an item is selected
align	"start" \| "center" \| "end"	"start"	Horizontal alignment of the dropdown
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Side where the dropdown appears
sideOffset	number	8	Distance in pixels from the trigger
disabled	boolean	false	Disable the entire dropdown
className	string	""	Additional CSS classes for trigger
contentClassName	string	""	Additional CSS classes for content
itemClassName	string	""	Additional CSS classes for items
aria-label	string	-	Accessibility label for the dropdown

Property	Type	Required	Description
label	string	Yes	Display text for the item
value	string	Yes	Unique identifier for the item
icon	ReactNode	No	Icon element to display
disabled	boolean	No	Disable this specific item
destructive	boolean	No	Mark item as destructive action