Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/menu.jsonUsage
<script lang="ts">
import * as Menu from "$lib/components/ui/menu/index.js";
</script>
<Menu.Root>
<Menu.Trigger>Open menu</Menu.Trigger>
<Menu.Popup align="start" sideOffset={4}>
<Menu.Item>Profile</Menu.Item>
<Menu.Separator />
<Menu.Group>
<Menu.GroupLabel>Playback</Menu.GroupLabel>
<Menu.Item>Play</Menu.Item>
<Menu.Item>Pause</Menu.Item>
</Menu.Group>
<Menu.Separator />
<Menu.CheckboxItem>Shuffle</Menu.CheckboxItem>
<Menu.CheckboxItem>Repeat</Menu.CheckboxItem>
<Menu.CheckboxItem variant="switch">Auto save</Menu.CheckboxItem>
<Menu.Separator />
<Menu.Sub>
<Menu.SubTrigger>Add to playlist</Menu.SubTrigger>
<Menu.SubPopup>
<Menu.Item>Jazz</Menu.Item>
<Menu.Item>Rock</Menu.Item>
</Menu.SubPopup>
</Menu.Sub>
</Menu.Popup>
</Menu.Root>API Reference
Menu.Root
Root component. Alias for Menu.Root from Shards UI. Also exported as DropdownMenu.
Menu.Trigger
Trigger button that opens the menu. Alias for Menu.Trigger from Shards UI. Also exported as DropdownMenuTrigger.
Menu.Popup
Popup container that displays the menu content. Also exported as DropdownMenuContent.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" \| "bottom" \| "left" \| "right" | "bottom" | Side of the trigger to position the popup |
align | "start" \| "center" \| "end" | "center" | Alignment relative to the trigger |
sideOffset | number | 4 | Distance from the trigger in pixels |
alignOffset | number | - | Offset along the alignment axis |
portalProps | MenuPopupProps["portalProps"] | - | Props forwarded to the internal portal |
Menu.Group
Groups related menu items. Alias for Menu.Group from Shards UI. Also exported as DropdownMenuGroup.
Menu.Item
Individual menu item. Also exported as DropdownMenuItem.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
variant | "default" \| "destructive" | "default" | Controls the item styling |
Using inset: When mixing items with and without icons, use inset on icon-less items to maintain alignment:
<Menu.Item><PencilIcon /> Edit</Menu.Item>
<Menu.Item><DeleteIcon /> Delete</Menu.Item>
<Menu.Item inset>Profile</Menu.Item>Menu.LinkItem
Link menu item for navigation. LinkItem renders a native <a> when you pass href. Styled like Menu.Item.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
variant | "default" \| "destructive" | "default" | Controls the item styling |
closeOnClick | boolean | true | Whether the menu closes when the link is clicked |
Use href for plain anchor links:
<Menu.LinkItem href="/docs">Docs</Menu.LinkItem>Menu.CheckboxItem
Checkbox menu item. Also exported as DropdownMenuCheckboxItem.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" \| "switch" | "default" | Display style; switch shows a toggle switch indicator |
Menu.RadioGroup
Groups radio menu items. Alias for Menu.RadioGroup from Shards UI. Also exported as DropdownMenuRadioGroup.
Menu.RadioItem
Radio menu item. Styled wrapper for Menu.RadioItem from Shards UI. Also exported as DropdownMenuRadioItem.
Menu.GroupLabel
Label for a menu group. Also exported as DropdownMenuLabel.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
Menu.Separator
Visual separator between menu items. Styled wrapper for Menu.Separator from Shards UI. Also exported as DropdownMenuSeparator.
Menu.Shortcut
Displays keyboard shortcut text. Custom component. Also exported as DropdownMenuShortcut.
Menu.Sub
Submenu container. Alias for Menu.Sub from Shards UI. Also exported as DropdownMenuSub.
Menu.SubTrigger
Trigger for opening a submenu. Also exported as DropdownMenuSubTrigger.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | Adds left padding to align with items that have icons |
Menu.SubPopup
Popup for submenu content. Also exported as DropdownMenuSubContent.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" \| "center" \| "end" | "start" | Alignment relative to the trigger |
sideOffset | number | 0 | Distance from the trigger in pixels |
alignOffset | number | -5 | Offset along the alignment axis; defaults to -5 unless align="center" |
Examples
Open on Hover
With Checkbox
With Switch
Menu.CheckboxItem supports a variant="switch" prop that displays a decorative switch indicator instead of a checkmark. This is a purely visual variant - the component remains a checkbox item with the same functionality.