// Generated by scripts/generate-showcase.mjs. Do not edit directly. page DropdownDetail { layout = "showcase" state playground_items = JSON.parse(ctx.url.searchParams.get("pg_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}]") state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true" state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Open playground menu" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_showChevron = (ctx.url.searchParams.get("pg_showChevron") ?? "true") === "true" state playground_menuLabel = ctx.url.searchParams.get("pg_menuLabel") ?? "Dropdown" state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom-start" state playground_width = ctx.url.searchParams.get("pg_width") ?? "md" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "raised" state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true" state playground_closeOnOutside = (ctx.url.searchParams.get("pg_closeOnOutside") ?? "true") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "Dropdown" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Dropdown" description = "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement." } view {
Overlays component

Dropdown

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

17 props4 slots5 eventsTheme 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 event.detail.
Component props17 controls
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.

01
Live preview

Click the trigger to open the menu

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.

02
Live preview

Click the trigger to open the menu

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.

03
Live preview

Click the trigger to open the menu

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 events

Respond to every public interaction

Use declarative @event handlers in .wrn files or subscribe to the bubbling browser events from JavaScript.

@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(event.detail)'
  @open='console.log(event.detail)'
  @close='console.log(event.detail)'
  @select='console.log(event.detail)'
  @action='console.log(event.detail)'
/>
Browser listeners.js
const component = document.querySelector("[data-ui-component=\"Dropdown\"], [data-component=\"Dropdown\"]")

component?.addEventListener("toggle", (event) => {
  console.log("toggle", event.detail)
})

component?.addEventListener("open", (event) => {
  console.log("open", event.detail)
})

component?.addEventListener("close", (event) => {
  console.log("close", event.detail)
})

component?.addEventListener("select", (event) => {
  console.log("select", event.detail)
})

component?.addEventListener("action", (event) => {
  console.log("action", event.detail)
})
Component API

Props and configuration

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

PropTypeDefaultRequired
itemsstring[]No
openbooleanfalseNo
defaultOpenbooleanfalseNo
labelstring"Open menu"No
iconstring""No
showChevronbooleantrueNo
menuLabelstring"Dropdown menu"No
placementstring"bottom-start"No
widthstring"md"No
sizestring"default"No
colorstring"primary"No
variantstring"raised"No
closeOnSelectbooleantrueNo
closeOnOutsidebooleantrueNo
disabledbooleanfalseNo
emptyLabelstring"No menu items"No
classstring""No
} }