Dropdowns Component
A flexible dropdown menu component with keyboard navigation, placement options, and customizable trigger content.
Live Preview
Selected: None selected
Usage
import { Dropdowns, type DropdownItem } from '@featherstudio/react-daisyui-kit';
import { useState } from 'react';
const items: DropdownItem[] = [
{ key: 'profile', label: 'Profile' },
{ key: 'settings', label: 'Settings' },
{ divider: true },
{ key: 'delete', label: 'Delete', danger: true },
];
export default function App() {
const [selected, setSelected] = useState('');
return (
<Dropdowns
items={items}
placement="bottom"
onSelect={setSelected}
trigger={<button className="btn">Menu</button>}
/>
);
}Features
Placement Support
Supports top and bottom dropdown placement.
Click Outside
Automatically close on outside click.
Keyboard Support
ESC to close and arrow key navigation.
Flexible Content
Customize item labels, danger state, disabled state, and divider rows.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | DropdownItem[] | - | Dropdown item list (required) |
| onSelect | (key: string) => void | - | Called when an enabled item with key is selected |
| disabled | boolean | false | Disables trigger interaction |
| trigger | ReactNode | default button | Custom trigger content for opening the dropdown |
| placement | 'bottom' | 'top' | 'bottom' | Menu position |
| className | string | '' | Additional classes for the wrapper |