MoreActions

A responsive toolbar component that automatically moves overflow items into a "More" dropdown menu when space is limited.

Props

Prop	Type	Default	Description
actionsContainerClass	string	''	Additional CSS classes for actions container
actionsContainerTag	string	'div'	HTML element tag to use for the actions container (e.g., 'ul' when children are <li> elements for valid HTML semantics)
moreButtonText	string	'More'	Text to be displayed on the trigger button
dropdownMode	'default' | 'custom'	'default'	Rendering mode for more-actions items

Basic Usage

Use the default slot for toolbar items and the REQUIRED #more-actions slot for their more-actions counterparts. Link them using matching data-action-id attributes.

<template>
  <MoreActions more-button-text="More Actions">
    <Button data-action-id="primary-action" primary>
      Primary Action
    </Button>
    <Button data-action-id="secondary-1" secondary>
      Secondary 1
    </Button>
    <Button data-action-id="secondary-2" secondary>
      Secondary 2
    </Button>
    <Button data-action-id="secondary-3" secondary>
      Secondary 3
    </Button>
    <Button data-action-id="secondary-4" secondary>
      Secondary 4
    </Button>

    <template #more-actions>
      <Button data-action-id="primary-action" class="w-full justify-start">
        Primary Action
      </Button>
      <Button data-action-id="secondary-1" class="w-full justify-start">
        Secondary 1
      </Button>
      <Button data-action-id="secondary-2" class="w-full justify-start">
        Secondary 2
      </Button>
      <Button data-action-id="secondary-3" class="w-full justify-start">
        Secondary 3
      </Button>
      <Button data-action-id="secondary-4" class="w-full justify-start">
        Secondary 4
      </Button>
    </template>
  </MoreActions>
</template>

Button Alignment

You can control the alignment of the More button using the moreButtonAlign prop. By default, the button is aligned to the right edge of the actions container, but you can also align it immediately after the last visible action.

Separate Alignment (Default)

<template>
  <MoreActions more-button-text="More Actions">
      <Button data-action-id="primary-action" primary>
        Primary Action
      </Button>
      <Button data-action-id="secondary-1" secondary>
        Secondary 1
      </Button>
      <Button data-action-id="secondary-2" secondary>
        Secondary 2
      </Button>
      <Button data-action-id="secondary-3" secondary>
        Secondary 3
      </Button>

    <template #more-actions>
      <Button data-action-id="primary-action" class="w-full justify-start">
        Primary Action
      </Button>
      <Button data-action-id="secondary-1" class="w-full justify-start">
        Secondary 1
      </Button>
      <Button data-action-id="secondary-2" class="w-full justify-start">
        Secondary 2
      </Button>
      <Button data-action-id="secondary-3" class="w-full justify-start">
        Secondary 3
      </Button>
    </template>
  </MoreActions>
</template>

Together Alignment

<template>
  <MoreActions more-button-text="More Actions" more-button-align="together">
      <Button data-action-id="primary-action" primary>
        Primary Action
      </Button>
      <Button data-action-id="secondary-1" secondary>
        Secondary 1
      </Button>
      <Button data-action-id="secondary-2" secondary>
        Secondary 2
      </Button>
      <Button data-action-id="secondary-3" secondary>
        Secondary 3
      </Button>

    <template #more-actions>
      <Button data-action-id="primary-action" class="w-full justify-start">
        Primary Action
      </Button>
      <Button data-action-id="secondary-1" class="w-full justify-start">
        Secondary 1
      </Button>
      <Button data-action-id="secondary-2" class="w-full justify-start">
        Secondary 2
      </Button>
      <Button data-action-id="secondary-3" class="w-full justify-start">
        Secondary 3
      </Button>
    </template>
  </MoreActions>
</template>

When using more-button-align="together", the More button is positioned immediately after all visible action elements, creating a more compact layout.

Custom Toggle Button

<template>
  <MoreActions>
    <template #toggle="{ toggle, isOpen }">
      <Button
        class="flex items-center gap-1.5 px-2 py-1.5 bg-blue-500 text-white rounded text-sm"
        @click="toggle"
      >
        <Icon
          name="chevron-down"
          :style="{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }"
        />
        {{ isOpen ? 'Close Menu' : 'Open Menu' }}
      </Button>
    </template>
    <Button data-action-id="action-1" secondary>
      Action 1
    </Button>
    <Button data-action-id="action-2" secondary>
      Action 2
    </Button>
    <Button data-action-id="action-3" secondary>
      Action 3
    </Button>
    <Button data-action-id="action-4" secondary>
      Action 4
    </Button>

    <template #more-actions>
      <Button data-action-id="action-1" class="w-full justify-start">
        Action 1
      </Button>
      <Button data-action-id="action-2" class="w-full justify-start">
        Action 2
      </Button>
      <Button data-action-id="action-3" class="w-full justify-start">
        Action 3
      </Button>
      <Button data-action-id="action-4" class="w-full justify-start">
        Action 4
      </Button>
    </template>
  </MoreActions>
</template>

Events

Event	Payload	Description
toggle	boolean	Emitted when dropdown is opened/closed

API

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

• MoreActions