Dropdown

Flexible dropdown component with single/multiple selection support, search functionality, and advanced composition. Built on top of Menu and Popover modules.

Installation

Import

import { Dropdown } from '@svelte-atoms/core';

Preset Configuration

Customize the dropdown appearance using presets

You can customize the default styles for Dropdown components by defining presets in your configuration:

Examples

Explore different dropdown variations and use cases

Basic Dropdown

Simple dropdown menu with items

Code

<Dropdown.Root>
  <Dropdown.Trigger as="button">
    Open Menu
  </Dropdown.Trigger>
  
  <Dropdown.Content>
    <Dropdown.Item value="profile">Profile</Dropdown.Item>
    <Dropdown.Item value="settings">Settings</Dropdown.Item>
    <Dropdown.Item value="logout">Logout</Dropdown.Item>
  </Dropdown.Content>
</Dropdown.Root>

Multiple Selection

Dropdown with multiple selection support. Selected items are displayed as badges.

Code

<script lang="ts">
  import { Dropdown, Input } from '@svelte-atoms/core';
  
  let selectedValues = $state<string[]>([]);
  let selectedLabels = $state<string[]>([]);
  
  const items = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' }
  ];
</script>

<Dropdown.Root bind:values={selectedValues} bind:labels={selectedLabels} multiple>
	<Dropdown.Trigger base={Input.Root} class="min-h-10 min-w-sm">
		<Dropdown.Selections class="flex flex-wrap gap-1" />
		<Dropdown.Placeholder class="">No fruits selected</Dropdown.Placeholder>
	</Dropdown.Trigger>
	
	<Dropdown.Content
		class="bg-background mt-2 max-h-60 overflow-auto rounded-lg border shadow-lg"
	>
		<input
			bind:value={filteredItems.query}
			class="border-border border-b px-4 py-3"
			placeholder="Search items..."
		/>
		{#each filteredItems.current as item (item.value)}
			<Dropdown.Item value={item.value} class="hover:bg-muted block px-4 py-2">
				{item.label}
			</Dropdown.Item>
		{/each}
	</Dropdown.Content>
</Dropdown.Root>

API Reference

Dropdown.Root Props

Prop

Type

Default

Description

open

boolean | undefined

false

Open

value

T | undefined

undefined

Value

values

T[] | undefined

undefined

Values

label

string | undefined

Label

labels

string[] | undefined

Labels

multiple

boolean | undefined

false

Multiple

disabled

boolean | undefined

false

Disabled

placements

string[] | undefined

Placements

placement

string | undefined

Placement

offset

number | undefined

Offset

keys

string[] | undefined

Keys

factory

Factory<DropdownBond<DropdownStateProps, DropdownBondState<DropdownStateProps>, DropdownBondElements>> | undefined

undefined

Factory

children

Snippet<[{ dropdown: DropdownBond<any, DropdownBondState<any>, DropdownBondElements>; }]> | undefined

undefined

Children

onquerychange

((query: string) => void) | undefined

Onquerychange

Dropdown.Trigger Props

Prop

Type

Default

Description

class

ClassValue | undefined

undefined

Class

children

Snippet<[{ selections: DropdownSelection[]; selection?: DropdownSelection | undefined; }]> | undefined

undefined

Children

getSelections

(<T extends DropdownBond>(bond: T) => DropdownSelection[]) | undefined

undefined

Get Selections

Dropdown.Item Props

Prop

Type

Default

Description

preset

string | undefined

'dropdown.item'

Preset key for styling

value

string | undefined

nanoid()

The value of the dropdown item

data

T | undefined

undefined

Custom data associated with the item

factory

(() => DropdownItemController<T>) | undefined

undefined

Factory function to create a custom DropdownItemController instance

children

Snippet<[{ dropdownItem: DropdownItemController<T>; }]> | undefined

undefined

Render prop for children

Dropdown.Query Props

Prop

Type

Default

Description

value

string | undefined

Value

children

Snippet<[]> | undefined

undefined

Children

...atomProps

HtmlAtomProps

All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

Dropdown.Selections Props

Prop

Type

Default

Description

class

ClassValue | undefined

undefined

Class

Selection

Component<{}, {}, string> | undefined

Selection

children

Snippet<[{ selections: DropdownSelection[]; selection?: DropdownSelection | undefined; }]> | undefined

undefined

Children

getSelections

(<T extends DropdownBond>(bond: T) => DropdownSelection[]) | undefined

undefined

Get Selections

Dropdown.Selection Props

Prop

Type

Default

Description

selection

DropdownSelection

Selection

children

Snippet<[]> | undefined

undefined

Children

onclose

((event: Event) => void) | undefined

undefined

Onclose

...atomProps

HtmlAtomProps

All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

Available Components

Dropdown.Root - Main dropdown container (manages state)
Dropdown.Trigger - Trigger element (composable with Input.Root or button)
Dropdown.Item - Individual selectable list item
Dropdown.Selections - Container for displaying selected items (badges)
Dropdown.Selection - Individual selection badge/chip
Dropdown.Placeholder - Placeholder element for empty state
Dropdown.Content - Alternative list container (re-exported from Menu)
Dropdown.Group - Group container for items (re-exported from Menu)
Dropdown.Divider - Visual divider between items (re-exported from Menu)
Dropdown.Title - Title element for groups (re-exported from Menu)
Dropdown.Arrow - Popover arrow indicator (re-exported from Popover)
Dropdown.Indicator - Custom indicator element (re-exported from Popover)

Helper Functions

filterDropdownData

A reactive helper function for filtering dropdown data based on a query string. Returns an object with query (getter/setter) and current (filtered results).

Accessibility

Built-in Accessibility Features

• Keyboard navigation (Arrow keys)
• Escape key to close
• Proper ARIA attributes
• Focus management
• Screen reader support
• Automatic positioning

Drawer

Form