Dropdown

Expand related actions from a single trigger.

<sy-dropdown>Installation guide Basic usage

Live preview

Interact with the component to see results here.

PositionOpening actionSize

Omit bordersDisabled

View code

HTML

<div style="align-self:center;margin:40px 0">
  <sy-dropdown
    position="bottomLeft"
    trigger="click"
    size="medium"
  ><span slot="title">Project actions</span>
    <sy-menu>
      <sy-menu-item value="edit">Edit</sy-menu-item>
      <sy-menu-item value="copy">Duplicate</sy-menu-item>
      <sy-menu-item value="archive" disabled>Archive</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

Usage guide

Use to collect secondary commands behind a button. Use Select for choosing values in a form.

Build the trigger
Put the trigger users click in the title slot.
Place the command list
Build sy-menu and its items in the default slot.
Run the selected command
Read value from the selected event and perform the corresponding action. Use disabled to prevent execution.

Examples

Choose an action

Selecting Edit or Duplicate emits the corresponding value.

View code

HTML

<div style="align-self:center;margin:40px 0">
  <sy-dropdown><span slot="title">Project actions</span>
    <sy-menu>
      <sy-menu-item value="edit">Edit</sy-menu-item>
      <sy-menu-item value="copy">Duplicate</sy-menu-item>
      <sy-menu-item value="archive" disabled>Archive</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

Minimal trigger

Show the menu action without a border.

View code

HTML

<div style="align-self:center;margin:40px 0">
  <sy-dropdown borderless><span slot="title">Project actions</span>
    <sy-menu>
      <sy-menu-item value="edit">Edit</sy-menu-item>
      <sy-menu-item value="copy">Duplicate</sy-menu-item>
      <sy-menu-item value="archive" disabled>Archive</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

Right alignment

Align the list's right edge with the trigger.

View code

HTML

<div style="align-self:center;margin:40px 0">
  <sy-dropdown position="bottomRight"><span slot="title">Project actions</span>
    <sy-menu>
      <sy-menu-item value="edit">Edit</sy-menu-item>
      <sy-menu-item value="copy">Duplicate</sy-menu-item>
      <sy-menu-item value="archive" disabled>Archive</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

Unavailable actions

Disable actions that are unavailable due to permissions or the current state.

View code

HTML

<div style="align-self:center;margin:40px 0">
  <sy-dropdown disabled><span slot="title">Project actions</span>
    <sy-menu>
      <sy-menu-item value="edit">Edit</sy-menu-item>
      <sy-menu-item value="copy">Duplicate</sy-menu-item>
      <sy-menu-item value="archive" disabled>Archive</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

Open on hover

Show the list while the pointer remains over it.

View code

HTML

<div style="align-self:center;margin:40px 0">
  <sy-dropdown trigger="hover"><span slot="title">Project actions</span>
    <sy-menu>
      <sy-menu-item value="edit">Edit</sy-menu-item>
      <sy-menu-item value="copy">Duplicate</sy-menu-item>
      <sy-menu-item value="archive" disabled>Archive</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<div style="align-self:center;margin:40px 0">
  <sy-dropdown
    position="bottomLeft"
    trigger="click"
    size="medium"
  ><span slot="title">Project actions</span>
    <sy-menu>
      <sy-menu-item value="edit">Edit</sy-menu-item>
      <sy-menu-item value="copy">Duplicate</sy-menu-item>
      <sy-menu-item value="archive" disabled>Archive</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Trigger help text

Describe the menu's purpose in tooltip to display help when the trigger is hovered.

View code

HTML

<div style="align-self:center;margin:40px 0">
  <sy-dropdown
    position="bottomLeft"
    trigger="click"
    size="medium"
    tooltip="Project edit and duplicate menu"
    id="supplement-1"
  ><span slot="title">Project actions</span>
    <sy-menu>
      <sy-menu-item value="edit">Edit</sy-menu-item>
      <sy-menu-item value="copy">Duplicate</sy-menu-item>
      <sy-menu-item value="archive" disabled>Archive</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "tooltip": "Project edit and duplicate menu"
  });
</script>

Compact action menu

Use a small borderless trigger for a compact action menu.

View code

HTML

<div style="align-self:center;margin:40px 0">
  <sy-dropdown
    position="bottomLeft"
    trigger="click"
    size="small"
    borderless
    id="supplement-1"
  ><span slot="title">Project actions</span>
    <sy-menu>
      <sy-menu-item value="edit">Edit</sy-menu-item>
      <sy-menu-item value="copy">Duplicate</sy-menu-item>
      <sy-menu-item value="archive" disabled>Archive</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "size": "small",
    "borderless": true
  });
</script>

Feature examples

Choose a feature from 8 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Compact action menu

Use a small borderless trigger for a compact action menu.

View code

HTML

<div style="align-self:center;margin:40px 0">
  <sy-dropdown
    position="bottomLeft"
    trigger="click"
    size="small"
    borderless
    id="supplement-1"
  ><span slot="title">Project actions</span>
    <sy-menu>
      <sy-menu-item value="edit">Edit</sy-menu-item>
      <sy-menu-item value="copy">Duplicate</sy-menu-item>
      <sy-menu-item value="archive" disabled>Archive</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "size": "small",
    "borderless": true
  });
</script>

API reference

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

`<sy-dropdown>`

Properties

Type	Default	Description
`boolean`	`false`	Hide the default border.
`boolean`	`false`	Block user interaction and keyboard focus.
`'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'`	`'bottomLeft'`	Corner used to align the menu with its trigger.
`'small' \| 'medium' \| 'large'`	`'medium'`	Component size.
`'hover' \| 'click'`	`'click'`	User action that opens the list or popup.
`string`	`''`	Helper description for the trigger.

Events

Event	Detail	Description
	`CustomEvent<any>`	Emitted when the user selects an item.

Slots

Slot	Description
	Content displayed in the title area.
	Component body or child items.

Dropdown

Usage guide

Build the trigger

Place the command list

Run the selected command

Examples

Choose an action

Minimal trigger

Right alignment

Unavailable actions

Open on hover

Events and payloads

Trigger help text

Compact action menu

Feature examples

Usage examples · Overview

Property · Borderless

Property · Disabled

Property · Position

Property · Size

Property · Trigger

Events · Selected

Usage examples · Compact action menu

API reference

<sy-dropdown>

Properties

Events

Slots

`<sy-dropdown>`