Introduction

The Dropdown component is a contextual menu overlay triggered by clicking or hovering on an anchor element. It supports a variety of visual lists including regular actions, dividers, checkbox lists, and nested, cascading submenus.

Built with our native CSS absolute alignment models, it flips orientations automatically when space runs out and is fully integrated as an interactive menu block in the Page Builder, allowing content authors and developers to easily structure options.

Usage via CMS Page Builder (JSON)

This component is available as a menu block in the JSON page schemas (content/pages/*.json). Content editors can configure visual label lists, checkbox states, separators, and cascades completely within the CMS.

1. Standard Actions Menu with Dividers

A classic action list featuring multiple task options separated by native dividers ("type": "separator") to group options clearly.

{
  "type": "menu",
  "triggerText": "File Options",
  "items": [
    { "type": "item", "label": "New Project", "value": "new" },
    { "type": "item", "label": "Open File", "value": "open" },
    { "type": "separator" },
    { "type": "item", "label": "Delete permanently", "value": "delete" }
  ]
}

2. Menu with Checkbox Settings

Renders list items with built-in checkbox toggle indicators, ideal for layout preferences or setting configurations. Selecting or deselecting a checkbox item keeps the menu open for subsequent options adjustment.

{
  "type": "menu",
  "triggerText": "Configure View",
  "items": [
    { "type": "checkbox", "label": "Show Grid Lines", "value": "grid", "checked": true },
    { "type": "checkbox", "label": "Enable Minimap", "value": "minimap", "checked": false }
  ]
}

3. Cascading Submenu Navigation

Embed multi-level option groups seamlessly. Nesting options as "submenu" triggers a secondary flyout panel on mouse-hover or keyboard tab triggers.

{
  "type": "menu",
  "triggerText": "Share Panel",
  "items": [
    { "type": "item", "label": "Copy Link", "value": "copy" },
    { "type": "separator" },
    {
      "type": "submenu",
      "label": "Send To...",
      "items": [
        { "type": "item", "label": "Email Contact", "value": "email" },
        { "type": "item", "label": "Slack Channel", "value": "slack" }
      ]
    }
  ]
}

CMS Configuration Reference

These fields map directly to Sveltia CMS block properties under the menu object schema declared in public/admin/config.yml.

List Item Properties (items)

Each entry in the items parameter list accepts the following configuration:

Developer Notes & Accessibility

• Smart Hydration Island: To calculate placement coordinates, support hover timeouts, and track active selection highlights, the Dropdown compiles into an interactive Preact island on the client.
• Cascading Overlays: Every nested submenu initiates its own nested interactive boundary, ensuring click events, hover entries, and outside close-listeners coordinate seamlessly without collision.
• WAI-ARIA Compliance: Dropdowns are fully screen-reader compliant out-of-the-box. The trigger button maps aria-haspopup="menu", while menu list elements implement role="menu", role="menuitem", or role="menuitemcheckbox". Full keyboard controls (Escape, Tab, Arrows, Enter) operate natively.