Overlays

Dropdown

Root container that wires a trigger to a popover-backed menu and coordinates open state, keyboard navigation, and CSS Anchor Positioning for descendant menu parts.

import { Dropdown } from '@lostgradient/cinder/dropdown';
overlaymenu
01

Overview

Composite dropdown root that coordinates the trigger, menu, and item subcomponents.

Usage

Dropdown is a compound component. Import the parent and compose its leaves via the namespace API: Dropdown.Trigger, Dropdown.Menu, Dropdown.Item, Dropdown.Label, Dropdown.Separator, and Dropdown.Group.

svelte 
<script lang="ts">
  import { Dropdown } from '@lostgradient/cinder/dropdown';
</script>

<Dropdown id="dropdown-actions">
  <Dropdown.Trigger>Options</Dropdown.Trigger>
  <Dropdown.Menu>
    <Dropdown.Label id="dropdown-actions-document">Document</Dropdown.Label>
    <Dropdown.Item>Edit</Dropdown.Item>
    <Dropdown.Item>Duplicate</Dropdown.Item>
    <Dropdown.Separator />
    <Dropdown.Item variant="danger">Delete</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

The leaves remain importable individually for à-la-carte builds — see @lostgradient/cinder/dropdown-trigger, @lostgradient/cinder/dropdown-menu, @lostgradient/cinder/dropdown-item, @lostgradient/cinder/dropdown-label, @lostgradient/cinder/dropdown-separator, and @lostgradient/cinder/dropdown-group.

Live preview
02

When to use

Use when
  • Composing a menu of actions or links revealed by clicking a button trigger.
  • Building a custom dropdown layout from dropdown-trigger, dropdown-menu, dropdown-item, dropdown-label, and dropdown-separator parts.
Avoid when
  • Selecting a value from a list of options — use select or combobox instead.
  • Showing supplementary content rather than a menu of choices — use popover.
03

Examples

Basic dropdown

A button trigger with a list of menu items.

Placement

Use bottom-start or bottom-end placement to align the menu with whichever trigger edge fits the surrounding layout.

With clickable items

Dropdown.Item accepts onclick handlers and a danger variant for destructive actions.

With group labels

Dropdown.Group and Dropdown.Label expose accessible group boundaries for related menu actions.

With separators

Dropdown.Separator divides menu item groups; useful before destructive actions.

04

Props

Props for dropdown
Name Type Default Required Bindable Description
id text HTML id applied to the dropdown root element. Auto-generated when omitted.
open discriminated-union false bind Controls the open state of the dropdown menu; bindable for controlled usage.
placement 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' 'bottom-start' Preferred menu placement relative to the trigger. Default bottom-start. The rendered menu may still flip to stay within the viewport.
trigger discriminated-union
children snippet