Navigation Core Stable
DropdownMenu
A menu of actions or options that opens from a trigger button, with full keyboard navigation, submenus and real DOM focus on every item.
Preview
svelte
<script lang="ts">
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
} from "fancy-ui-svelte";
</script>
<DropdownMenu>
<DropdownMenuTrigger>Options</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onSelect={() => console.log("rename")}>Rename</DropdownMenuItem>
<DropdownMenuItem onSelect={() => console.log("duplicate")}>Duplicate</DropdownMenuItem>
<DropdownMenuItem onSelect={() => console.log("share")}>Share…</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive" onSelect={() => console.log("delete")}>
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Installation
pnpm add fancy-ui-svelte
import { DropdownMenu } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { DropdownMenu } from 'fancy-ui-svelte';
</script>
<DropdownMenu />Examples
Basic Usage
svelte
<script lang="ts">
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
} from "$lib/fancy-ui/dropdown-menu";
</script>
<DropdownMenu>
<DropdownMenuTrigger>Options</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onSelect={() => console.log("rename")}>Rename</DropdownMenuItem>
<DropdownMenuItem onSelect={() => console.log("duplicate")}>Duplicate</DropdownMenuItem>
<DropdownMenuItem onSelect={() => console.log("share")}>Share…</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive" onSelect={() => console.log("delete")}>
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>With Shortcuts
Display-only keyboard shortcuts rendered as trailing kbd tags.
svelte
<script lang="ts">
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
} from "$lib/fancy-ui/dropdown-menu";
</script>
<DropdownMenu>
<DropdownMenuTrigger>File</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem shortcut="⌘R" onSelect={() => console.log("rename")}>Rename</DropdownMenuItem>
<DropdownMenuItem shortcut="⌘D" onSelect={() => console.log("duplicate")}>
Duplicate
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem shortcut="⌫" onSelect={() => console.log("delete")}>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Destructive Item
A destructive action set apart with the destructive variant.
svelte
<script lang="ts">
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
} from "$lib/fancy-ui/dropdown-menu";
</script>
<DropdownMenu>
<DropdownMenuTrigger>Project</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onSelect={() => console.log("archive")}>Archive</DropdownMenuItem>
<DropdownMenuItem onSelect={() => console.log("leave")}>Leave project</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
variant="destructive"
shortcut="⌫"
onSelect={() => console.log("delete project")}
>
Delete project
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>With Submenu
A nested submenu that opens on hover, click or ArrowRight.
svelte
<script lang="ts">
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
} from "$lib/fancy-ui/dropdown-menu";
</script>
<DropdownMenu>
<DropdownMenuTrigger>Actions</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onSelect={() => console.log("reload")}>Reload</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>More tools</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem onSelect={() => console.log("screenshot")}>Screenshot</DropdownMenuItem>
<DropdownMenuItem onSelect={() => console.log("inspect")}>Inspect</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem onSelect={() => console.log("save")}>Save page…</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Disabled Items
Disabled rows are skipped by keyboard navigation and inert to click.
svelte
<script lang="ts">
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from "$lib/fancy-ui/dropdown-menu";
</script>
<DropdownMenu>
<DropdownMenuTrigger>Edit</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onSelect={() => console.log("undo")}>Undo</DropdownMenuItem>
<DropdownMenuItem disabled onSelect={() => console.log("redo")}>Redo</DropdownMenuItem>
<DropdownMenuItem onSelect={() => console.log("cut")}>Cut</DropdownMenuItem>
<DropdownMenuItem disabled onSelect={() => console.log("paste")}>Paste</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether the menu is open. Bindable |
onOpenChange | (open: boolean) => void | - | Called whenever the menu opens or closes, however it happened |
side | "top" | "bottom" | "left" | "right" | "bottom" | Side of the trigger to place the menu on. Flips when it would overflow |
align | "start" | "center" | "end" | "start" | Alignment along the trigger's cross axis |
offset | number | 4 | Gap in pixels between the trigger and the menu |
loop | boolean | true | Whether arrow-key navigation wraps at the ends |
sound | boolean | false | Plays open and close on the trigger and submenus, and select on an item — one cue per interaction — once the user has enabled sound |
Slots
| Slot | Description |
|---|---|
children | The DropdownMenuTrigger and DropdownMenuContent |
Links
Related components
Br
Breadcrumb
A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.
Navigation Stable
Co
CommandMenu
A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation with focus that never leaves the search field.
Navigation Stable
Co
ContextMenu
A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.
Navigation Stable