Appearance

Actions Dropdown ​

Used to display a dropdown menu of actions.

Basic usage ​

template
<ActionsDropdown button-text="Click me!">
  <Menu>
    <MenuItem><button>Hello 👋</button></MenuItem>
  </Menu>
</ActionsDropdown>

Playground ​

Alignment ​

ActionsDropdown can be docked to a specific side of the trigger element. This can be done via the align property:

Right Aligned ​

template
<ActionsDropdown align="right">
  <Menu>
    <MenuItem><button>Action</button></MenuItem>
  </Menu>
</ActionsDropdown>

Left Aligned ​

template
<ActionsDropdown align="left">
  <Menu>
    <MenuItem><button>Action</button></MenuItem>
  </Menu>
</ActionsDropdown>

Disabled ​

ActionsDropdown can be disabled by setting the disabled property to true:

template
<ActionsDropdown disabled>
  <Menu>
    <MenuItem><button>Action</button></MenuItem>
  </Menu>
</ActionsDropdown>

Styling ​

If you pass the class property to the ActionsDropdown, you will be styling the trigger element of the component. In order to style the dropdown content, you can do it via the contentClass property.

vue
<template>
  <ActionsDropdown :class="$style.trigger" :content-class="$style.content">
    <Menu>
      <MenuItem><button>Action</button></MenuItem>
    </Menu>
  </ActionsDropdown>
</template>

<style module>
  .trigger {
    background: var(--color-red-100);
  }

  .content :global(.stash-menu) {
    background: var(--color-orange-100);
  }
</style>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.