Dropdown — Svelte

Dropdown component — Svelte.

Dropdown component

An accessible dropdown menu component for displaying lists of actions or options. Supports menu items, separators, links, submenus, and click handlers. Matches the Astro dropdown in look and behavior.

Basic usage

Live example

With links

Live example

With disabled items

Live example

Nested submenus

Live example

Menu positioning

Live examples

Left

Right

Usage

svelte svelte 
<script>
  import Dropdown from './components/svelte/Dropdown.svelte';
</script>

<Dropdown
  trigger="Options"
  items={[
    { label: 'Save', onClick: (v) => save(v) },
    { label: 'Docs', href: '/docs' },
    { separator: true },
    { label: 'More', submenu: [{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }] },
  ]}
/>