`dropdown` element

A button that opens a menu of links or any content (a mega menu).

Renders

<details class="iwc-dropdown"> with a <summary> and a menu panel

Required

label and items or elements.

Native apps

Web, and server-driven native apps

Syntax

dropdown element

{ "type": "dropdown" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Default	Description
`open`	`boolean`	—	accordion/details: start open
`items`	`array of item`	—
`label`	`string`	—
`elements`	`array of element`	—
`opensOn`	`"click""hover"`	`click`	dropdown/navbar: how menus open (hover falls back to click on touch screens)

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Events & actions

Escape or a click outside closes it. A menu that would overflow the screen flips to the other side.

Example

dropdown example

{
  "type": "dropdown",
  "label": "Account",
  "items": [
    { "label": "Profile", "target": "/account" },
    { "label": "Orders", "target": "/account/orders" }
  ],
  "elements": [
    { "type": "button", "label": "Sign out", "variant": "ghost", "action": "logout" }
  ]
}

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

Rendered HTML

<div class="iwc-page ipage" id="iwc-content">
  <details class="iwc-dropdown iee1bd0b8">
    <summary>
      Account ▾
    </summary>
    <div class="iwc-dropdown-menu">
      <a href="/account">Profile</a><a href="/account/orders">Orders</a>
      <button class="iwc-button i7cd17d47 iwc-button-ghost" type="button" data-iwc-action="logout">
        Sign out
      </button>
    </div>
  </details>
</div>

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.