Lambda UI
v1.3.4
Stable

Dropdown

Dropdown component displays a menu of options when triggered, commonly used for actions and navigation.

Playground

Experiment with all the properties of the Dropdown component in real time.

Properties
text

The text displayed on the dropdown button.

variant

Visual style of the dropdown button.

size

Size of the dropdown button.

Usage

import { Dropdown, Divider } from "lambda-ui-components";
import { User, Settings, LogOut } from "lucide-react";

export default function App() {
	return (
		<Dropdown text="Options">
			<Dropdown.Item 
				icon={<User />} 
				text="Profile" 
				onSelectOption={() => console.log("Profile")} 
			/>
			<Dropdown.Item 
				icon={<Settings />} 
				text="Settings" 
				onSelectOption={() => console.log("Settings")} 
			/>
			<Divider />
			<Dropdown.Item 
				icon={<LogOut />} 
				text="Logout" 
				onSelectOption={() => console.log("Logout")} 
			/>
		</Dropdown>
	);
}

With Icons Only

You can create an icon-only dropdown by omitting the text prop and only providing an icon.

With Keyboard Shortcuts

Display keyboard shortcuts next to menu items using the shortcutKeys prop.

API Reference

Dropdown Props

Prop
Default
Type
text
undefined
string
icon
undefined
ReactNode
variant
"solid"
"solid" | "outline" | "text" | "soft"
size
"medium"
"tiny" | "small" | "medium" | "large"
radius
"small"
"none" | "tiny" | "small" | "medium" | "large"

Dropdown.Item Props

Prop
Default
Type
text
undefined
string
icon
undefined
ReactNode
shortcutKeys
undefined
string[]
url
undefined
string
onSelectOption
undefined
() => void
The modern React component library.
© 2026 Lambda UI. Made with in Mexico by AletzMan.