Ambar UI — Svelte 5 Components with Tailwind CSS v4

Menu dropdown — icon, shortcut, hint, divider, danger, submenu, keyboard nav.

Import

import Dropdown from '$lib/components/Dropdown.svelte';
import type { DropdownItem } from '$lib/components/Dropdown.svelte';

Usage

The trigger prop is a snippet that receives toggle (opens/closes the menu) and open (boolean state).

svelte

<script lang="ts">
  import Dropdown from '$lib/components/Dropdown.svelte';
  import Button from '$lib/components/Button.svelte';

  const items = [
    { label: 'Edit',   shortcut: '⌘E' },
    { label: 'Copy',   shortcut: '⌘C' },
    { type: 'divider' },
    { label: 'Delete', danger: true },
  ];
</script>

<Dropdown {items}>
  {#snippet trigger({ toggle, open })}
    <Button onclick={toggle}>Options</Button>
  {/snippet}
</Dropdown>

Basic

Basic usage with icons, shortcuts, and a danger item.

Submenu

Add children to any item — hover to open the nested menu.

svelte

<Dropdown items={[
  { label: 'Share', children: [
    { label: 'Twitter / X' },
    { label: 'LinkedIn' },
    { type: 'divider' },
    { label: 'Copy Link', shortcut: '⌘C' },
  ]},
]}>
  {#snippet trigger({ toggle })}
    <Button onclick={toggle}>Share</Button>
  {/snippet}
</Dropdown>

Context Menu Style

3-dot trigger pattern — common for post/card actions.

Zeynep Kaya

2m ago

This animation is amazing! 🔥

Mert Aydın

5m ago

Can you share the source code?

Disabled Items

Set disabled: true on any item. A hint explains why.

Animations

5 open/close animations — pick one with the buttons below.

API Reference

Dropdown Props

Prop	Type	Default	Description
`items`	`DropdownItem[]`	`—`	Array of menu items to render.
`trigger`	`Snippet<[{ toggle: () => void, open: boolean }]>`	`—`	Snippet that renders the trigger element. Receives toggle() and open state.
`placement`	`'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'`	`'bottom-start'`	Where the menu appears relative to the trigger.
`animation`	`'scale' \| 'slide' \| 'elastic' \| 'bounce' \| 'zoom'`	`'scale'`	Open/close animation style.
`offset`	`number`	`6`	Gap in px between the trigger and the menu.

DropdownItem Fields

Prop	Type	Default	Description
`type`	`'item' \| 'divider' \| 'label'`	`'item'`	Item type. 'divider' renders a separator, 'label' renders a non-interactive heading.
`label`	`string`	`—`	Visible text for the item.
`icon`	`Snippet`	`—`	Optional icon snippet rendered before the label.
`shortcut`	`string`	`—`	Keyboard shortcut shown on the right (e.g. ⌘E).
`hint`	`string`	`—`	Subtle secondary text shown below the label.
`danger`	`boolean`	`false`	Renders the item in red to indicate a destructive action.
`disabled`	`boolean`	`false`	Grays out the item and prevents interaction.
`children`	`DropdownItem[]`	`—`	Nested items that open a submenu on hover.
`onclick`	`() => void`	`—`	Click handler for the item.