Dropdown Menu
Displays a menu to the user triggered by a button. Plays open and close sounds.
Displays a menu to the user triggered by a button. The sensory-ui Dropdown Menu plays sounds when opening and closing, confirming the menu interaction.
Pattern: Open / close
Demo
Live demoSwitch sound packs to compare
Installation
npx shadcn@latest add SatyamVyas04/sensory-ui/sensory-ui-dropdown-menuImport
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/sensory-ui/dropdown-menu";Sound Props
| Prop | Type | Default | Description |
|---|---|---|---|
sound | SoundRole | false | "overlay.open" | Sound played when the menu opens. |
closeSound | SoundRole | false | "overlay.close" | Sound played when the menu closes. |
volume | number | 1 | Per-component volume multiplier (0–1). |
Default Sound Role
overlay.open on open, overlay.close on close.
Usage
<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Custom sounds
<DropdownMenu sound="interaction.tap" closeSound="interaction.subtle">
{/* ... */}
</DropdownMenu>Disable sounds
<DropdownMenu sound={false} closeSound={false}>
{/* ... */}
</DropdownMenu>Customizations
Action menu
<DropdownMenu sound="overlay.open" closeSound="overlay.close">
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<IconDots className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Duplicate</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>User menu
<DropdownMenu sound="overlay.open" closeSound="overlay.close">
<DropdownMenuTrigger>
<Avatar />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Sign out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Default Props
| Prop | Value |
|---|---|
sound | "overlay.open" |
closeSound | "overlay.close" |
volume | 1 |
Tasteful Sound Choices
| Situation | Recommended Sound | Why |
|---|---|---|
| Action menu | overlay.open / overlay.close | Default: clear menu cue |
| User profile menu | overlay.open / overlay.close | Consistent overlay pattern |
| Sort/filter options | interaction.tap | Lighter for utility menus |
| Destructive actions | notification.warning | For delete/remove items |
When to Use
- Action menus: Card actions, row actions, toolbar overflow
- User menus: Profile dropdown, account settings
- Sort/filter: Sort options, filter toggles
- Navigation: Secondary navigation, settings access
Avoid sound on
- Dropdowns that open on hover (sounds would be premature)
- Dropdowns with many items (sound on open is sufficient)
Event Triggers
| Event | Default Sound |
|---|---|
| Menu opens | overlay.open |
| Menu closes | overlay.close |
shadcn/ui Reference
View the original Dropdown Menu documentation.