Skip to content

Overflow Menu

Basically a Dropdown select, except you have to click to open it and you don't select anything.

vue
<OverflowMenu
  class="btn"
  :options="[
    {
      id: 'play',
      color: 'primary',
      action: () => {},
      hoverFilledOnly: true,
    },
    { divider: true },
    {
      id: 'duplicate',
      action: () => {},
    },
    {
      id: 'report',
      action: () => {},
    },
    {
      id: 'remain',
      action: () => {},
      remainOnClick: true,
    },
    { divider: true },
    {
      id: 'delete',
      color: 'danger',
      action: () => {},
      hoverFilled: true,
    },
  ]"
>
  More options...
  <template #like>
    <HeartIcon /> Like
  </template>
  <template #report>
    <ReportIcon /> Report
  </template>
  <template #delete>
    <TrashIcon /> Delete
  </template>
</OverflowMenu>
<OverflowMenu
  class="btn"
  :options="[
    {
      id: 'play',
      color: 'primary',
      action: () => {},
      hoverFilledOnly: true,
    },
    { divider: true },
    {
      id: 'duplicate',
      action: () => {},
    },
    {
      id: 'report',
      action: () => {},
    },
    {
      id: 'remain',
      action: () => {},
      remainOnClick: true,
    },
    { divider: true },
    {
      id: 'delete',
      color: 'danger',
      action: () => {},
      hoverFilled: true,
    },
  ]"
>
  More options...
  <template #like>
    <HeartIcon /> Like
  </template>
  <template #report>
    <ReportIcon /> Report
  </template>
  <template #delete>
    <TrashIcon /> Delete
  </template>
</OverflowMenu>