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';
overlaymenu
01

Overview

Reference usage

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';
</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 are also named exports of @lostgradient/cinder.

Dropdown supports two mutually exclusive APIs: the compound Dropdown.Trigger/Dropdown.Menu composition shown above, and a legacy trigger/open snippet-prop API. Do not mix the two on the same instance.

id is optional (auto-generated) only for the legacy trigger/open API. The compound Dropdown.Trigger/Dropdown.Menu API requires id explicitly.

Live preview

Basic dropdown

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
Description
id text
open bindable boolean false 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 snippet
children snippet