Overlays component

Dropdown

Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.

17 props4 slots5 outputsTheme readyResponsive

Interactive playground

Configure Dropdown

Change any prop and inspect the server-rendered component immediately.

Live preview

Component code

<Dropdown
  items='[
    {
      "id": "dropdown-0-1",
      "key": "dropdown-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#dropdown-demo",
      "actionHref": "#dropdown-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "dropdown-0-2",
      "key": "dropdown-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#dropdown-demo",
      "actionHref": "#dropdown-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  label="Dropdown"
  menuLabel="Dropdown"
  emptyLabel="Dropdown">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Dropdown>

Event outputInteract with the preview to inspect the typed payload.

Component props17 controls

itemsunknown[]openbooleandefault Openbooleanlabelstringiconstringshow Chevronbooleanmenu Labelstringplacementstringwidthstringsizestringcolorstringvariantstringclose On Selectbooleanclose On Outsidebooleandisabledbooleanempty Labelstringclassstring

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Action dropdown

Group related actions behind one compact trigger.

Component usage.wrn

<Dropdown
  items='[
    {
      "label": "Open dashboard",
      "description": "View the operational workspace",
      "value": "dashboard",
      "icon": "icon-[lucide--layout-dashboard]"
    },
    {
      "label": "Share record",
      "value": "share",
      "icon": "icon-[lucide--share-2]",
      "shortcut": "Ctrl S"
    },
    {
      "type": "divider"
    },
    {
      "label": "Delete record",
      "value": "delete",
      "icon": "icon-[lucide--trash-2]",
      "danger": true
    }
  ]'
  label="Open actions"
  icon="icon-[lucide--menu]"
  menuLabel="Dropdown"
  width="lg"
  emptyLabel="Dropdown">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Dropdown>

Compact

Compact overflow menu

Use an icon-led compact menu in tables, cards, and toolbars.

Component usage.wrn

<Dropdown
  items='[
    {
      "label": "Open dashboard",
      "description": "View the operational workspace",
      "value": "dashboard",
      "icon": "icon-[lucide--layout-dashboard]"
    },
    {
      "label": "Share record",
      "value": "share",
      "icon": "icon-[lucide--share-2]",
      "shortcut": "Ctrl S"
    },
    {
      "type": "divider"
    },
    {
      "label": "Delete record",
      "value": "delete",
      "icon": "icon-[lucide--trash-2]",
      "danger": true
    }
  ]'
  label="More actions"
  icon="icon-[lucide--ellipsis]"
  showChevron="false"
  menuLabel="Compact example"
  width="sm"
  size="sm"
  variant="soft"
  emptyLabel="Compact example">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Dropdown>

Advanced

Detailed action menu

Open the menu from its trigger to preview placement, descriptions, shortcuts, danger states, and event output.

Component usage.wrn

<Dropdown
  items='[
    {
      "label": "Open dashboard",
      "description": "View the operational workspace",
      "value": "dashboard",
      "icon": "icon-[lucide--layout-dashboard]"
    },
    {
      "label": "Share record",
      "value": "share",
      "icon": "icon-[lucide--share-2]",
      "shortcut": "Ctrl S"
    },
    {
      "type": "divider"
    },
    {
      "label": "Delete record",
      "value": "delete",
      "icon": "icon-[lucide--trash-2]",
      "danger": true
    }
  ]'
  label="Review detailed menu"
  icon="icon-[lucide--trash-2]"
  menuLabel="Advanced example"
  placement="bottom-end"
  width="xl"
  size="lg"
  emptyLabel="Advanced example">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Dropdown>

Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@toggleFires when the component changes between open and closed or on and off states.

@openFires after the component opens.

@closeFires after the component closes.

@selectFires when an item, option, card, or result is selected.

@actionFires when the component's primary or item action is activated.

Declarative handlers.wrn

<Dropdown
  @toggle='console.log(payload)'
  @open='console.log(payload)'
  @close='console.log(payload)'
  @select='console.log(payload)'
  @action='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Dropdown\"], [data-component=\"Dropdown\"]")

if (component) registerOutputHandler(component, "toggle", (payload) => {
  console.log("toggle", payload)
})

if (component) registerOutputHandler(component, "open", (payload) => {
  console.log("open", payload)
})

if (component) registerOutputHandler(component, "close", (payload) => {
  console.log("close", payload)
})

if (component) registerOutputHandler(component, "select", (payload) => {
  console.log("select", payload)
})

if (component) registerOutputHandler(component, "action", (payload) => {
  console.log("action", payload)
})

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`items`	unknown[]	`[]`	No
`open`	boolean	`false`	No
`defaultOpen`	boolean	`false`	No
`label`	string	`"Open menu"`	No
`icon`	string	`""`	No
`showChevron`	boolean	`true`	No
`menuLabel`	string	`"Dropdown menu"`	No
`placement`	string	`"bottom-start"`	No
`width`	string	`"md"`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"raised"`	No
`closeOnSelect`	boolean	`true`	No
`closeOnOutside`	boolean	`true`	No
`disabled`	boolean	`false`	No
`emptyLabel`	string	`"No menu items"`	No
`class`	string	`""`	No