Dropdown

Dropdown menu for displaying a list of actions or options. Triggered by a button click.

Installation

Import

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

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

Basic Dropdown

Simple dropdown menu

Code

<Dropdown.Root>
  <Dropdown.Trigger>
    <button>Open Menu</button>
  </Dropdown.Trigger>
  
  <Dropdown.Content>
    <Dropdown.Item>Profile</Dropdown.Item>
    <Dropdown.Item>Settings</Dropdown.Item>
    <Dropdown.Item>Logout</Dropdown.Item>
  </Dropdown.Content>
</Dropdown.Root>

API Reference

Dropdown.Root Props

Prop

Type

Default

Description

open

boolean

false

Control open state

placement

'bottom' | 'top' | 'left' | 'right'

'bottom'

Menu position

class

string

Additional CSS classes

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