Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Simple Dropdown with Icons Dropdown Menu for Svelte

A short menu behind a dots button with an icon before Profile, Settings, Help and a destructive Log out.

UI library: Ark UI

A dots button opens Profile, Settings, Help, and Log out, with an icon before each label. Log out uses the destructive color.

Use it for a short account menu on a card or a navbar. If Log out should be confirmed, open an Alert Dialog first. In Svelte, Ark UI does not sign the user out.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu><DropdownMenuTrigger>{#snippet asChild(props)}<Button {...props({ "aria-label": "More options" })} size="icon-md" variant="outline"><MoreHorizontalIcon aria-hidden="true" /></Button>{/snippet}</DropdownMenuTrigger><DropdownMenuContent class="w-40"><DropdownMenuItem value="profile"><UserIcon aria-hidden="true" />Profile</DropdownMenuItem><DropdownMenuItem value="settings"><SettingsIcon aria-hidden="true" />Settings</DropdownMenuItem><DropdownMenuItem value="help"><CircleHelpIcon aria-hidden="true" />Help</DropdownMenuItem><DropdownMenuItem value="log-out" variant="destructive"><LogOutIcon aria-hidden="true" />Log out</DropdownMenuItem></DropdownMenuContent></DropdownMenu>

FAQ

What is in this menu?

Four DropdownMenuItems, Profile, Settings, Help and Log out, each with an aria-hidden icon before the label. There are no groups or separators.

How is Log out marked?

variant="destructive" on its item colors it. It doesn't confirm anything; do that in its handler if you need to.

What does the trigger look like?

An outline Button with size="icon-md", a dots icon and aria-label set to More options, since it has no text.

How do I give the menu a fixed width?

Set a width class on the content part. The demo uses w-40; without one the menu sizes to its rows.

How do I run Settings or Log out?

The menu closes after a choice. Handle it where your library reports the chosen item. Set onSelect on DropdownMenu. It receives details.value, such as settings.

Can I open this menu from the keyboard?

Yes. Tab to the button and press Enter, Space or Arrow Down. Arrow keys move between rows, Enter picks one, and Escape closes the menu and returns focus to the button.

API Reference

Dropdown Menu

Sets value="profile", value="settings", value="help", value="log-out" and variant="destructive". The rest is on the Dropdown Menu page.

Button

Sets props, aria-label, More, options, size="icon-md" and variant="outline". The rest is on the Button page.

All 30 dropdown menu examples