Button dropdown

Preview

Basic button dropdown

Note: Menu items are set via the items JavaScript property. See usage below.

Variants

Primary actions

Normal actions

With icons

Nested groups

Usage

<cs-button-dropdown>Actions</cs-button-dropdown>

<script>
  const dropdown = document.querySelector('cs-button-dropdown');
  dropdown.items = [
    { text: 'Edit', id: 'edit' },
    { text: 'Delete', id: 'delete', disabled: true },
    { text: 'Duplicate', id: 'duplicate' },
  ];
</script>

Properties

aria-expandedbooleanrequired
aria-labelstring | undefinedrequired
disabledbooleanrequired
disabled-reasonstring
is-openbooleanrequired
on-click() => voidrequired
test-utils-classstringrequired
trigger-refunknownrequired