Dropdown Menu
A floating menu component triggered by a button click. Supports icons, separators, danger states, disabled items, keyboard navigation, and click-outside dismissal.
Live Preview
Interact with the dropdown component in real time. Adjust alignment and size to see changes instantly.
1<AidashDropdown2trigger={<TriggerButton>Options</TriggerButton>}3items={menuItems}4align="left"5size="md"6/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the AidashDropdown component and DropdownItem type into your file.
import { AidashDropdown, type DropdownItem } from '@/components/aidash/dropdown';Basic Usage
The simplest way to use AidashDropdown with default props.
1const items: DropdownItem[] = [2{ label: 'Edit', onClick: () => {} },3{ label: 'Duplicate', onClick: () => {} },4{ label: 'Archive', onClick: () => {} },5{ label: 'Delete', onClick: () => {}, danger: true },6];7 8<AidashDropdown9trigger={<button>Actions</button>}10items={items}11/>Alignment
Control whether the dropdown menu aligns to the left or right edge of the trigger.
Left Aligned
Right Aligned
1<AidashDropdown align="left" trigger={...} items={items} />2<AidashDropdown align="right" trigger={...} items={items} />Sizes
Three sizes to fit different layout contexts.
Small
Medium
Large
1<AidashDropdown size="sm" trigger={...} items={items} />2<AidashDropdown size="md" trigger={...} items={items} />3<AidashDropdown size="lg" trigger={...} items={items} />With Icons
Add icons to menu items for better visual recognition.
1const items: DropdownItem[] = [2{ label: 'Edit', icon: <EditIcon />, onClick: () => {} },3{ label: 'Copy', icon: <CopyIcon />, onClick: () => {} },4{ label: 'Share', icon: <ShareIcon />, onClick: () => {} },5{ label: 'Download', icon: <DownloadIcon />, onClick: () => {} },6];7 8<AidashDropdown trigger={<button>File Actions</button>} items={items} />Danger Items
Highlight destructive actions with the danger prop to warn users.
1const items: DropdownItem[] = [2{ label: 'Profile', icon: <UserIcon />, onClick: () => {} },3{ label: 'Settings', icon: <SettingsIcon />, onClick: () => {} },4{ label: '', separator: true },5{ label: 'Log out', icon: <LogoutIcon />, danger: true, onClick: () => {} },6];Separators
Group related items together using visual dividers.
1const items: DropdownItem[] = [2{ label: 'Edit', icon: <EditIcon />, onClick: () => {} },3{ label: 'Duplicate', icon: <CopyIcon />, onClick: () => {} },4{ label: '', separator: true }, // ← divider5{ label: 'Archive', icon: <ArchiveIcon />, onClick: () => {} },6{ label: 'Settings', icon: <SettingsIcon />, onClick: () => {} },7{ label: '', separator: true }, // ← divider8{ label: 'Delete', icon: <TrashIcon />, danger: true, onClick: () => {} },9];Disabled Items
Prevent interaction on specific items while keeping them visible.
1const items: DropdownItem[] = [2{ label: 'Edit', icon: <EditIcon />, onClick: () => {} },3{ label: 'Copy', icon: <CopyIcon />, disabled: true }, // ← disabled4{ label: 'Share', icon: <ShareIcon />, onClick: () => {} },5{ label: 'Download', icon: <DownloadIcon />, disabled: true }, // ← disabled6];Props API
Complete list of props accepted by AidashDropdown.
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactNode | — | The element that toggles the dropdown menu |
| items | DropdownItem[] | [] | Array of menu items to display |
| align | 'left' | 'right' | 'left' | Horizontal alignment of the menu relative to the trigger |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the dropdown menu items |
| className | string | '' | Additional CSS classes for the wrapper |
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Text label for the menu item |
| icon | ReactNode | — | Optional icon rendered before the label |
| onClick | () => void | — | Click handler for the item |
| href | string | — | If provided, renders the item as a link |
| disabled | boolean | false | Disable interaction on the item |
| danger | boolean | false | Style the item as a destructive action (red) |
| separator | boolean | false | Render a divider line instead of a menu item |
separator is true, all other properties on that item are ignored and a divider line is rendered instead.Accessibility
Built-in accessibility features for keyboard navigation and ARIA attributes.
ARIA Roles
The trigger has role="button", aria-haspopup="true", and aria-expanded. The menu uses role="menu" and each item has role="menuitem".
Keyboard Navigation
Press Enter or Space to toggle the menu. Press Escape to close the dropdown from anywhere on the page.
Click Outside
Clicking anywhere outside the dropdown automatically dismisses the menu, following standard UI behavior patterns.
Disabled State
Disabled items are visually dimmed and non-interactive. The disabled HTML attribute is set on the underlying button element.
1{/* Trigger automatically gets aria-haspopup and aria-expanded */}2<AidashDropdown3trigger={<button>Menu</button>}4items={items}5/>6 7{/* Escape key closes the menu */}8{/* Click outside closes the menu */}9{/* Disabled items prevent onClick from firing */}Related
Other components that work well alongside Dropdown Menu.