MoreActions

A component for displaying actions with dynamic hiding based on container width.

Features

• Dynamic hiding: Automatically hides actions in a dropdown when there's insufficient space
• Dynamic actions: Actions that can be hidden when there's insufficient space
• Smart More button: Shows More button when actions overflow
• IntersectionObserver: Uses modern API for precise element visibility detection
• Automatic gap: Maintains proper spacing between visible actions and the More button

Props

Prop	Type	Default	Description
dropdownClass	string	''	Additional CSS classes for dropdown content
actionsContainerClass	string	''	Additional CSS classes for actions container
moreButtonText	string	'More'	Text to be displayed on the trigger button
itemInDropdownClass	string | Record<string, boolean> | undefined	undefined	CSS class or classes to be applied to items inside the dropdown
dropdownMode	'default' | 'custom'	'default'	Rendering mode for dropdown items
disableAutoDetectActions	boolean	false	Whether to disable automatic detection of actions from first-level children in the actions slot

Slots

actions

Actions that can be dynamically hidden when there's insufficient space. These actions will be shown in the main container when space allows, and moved to the dropdown when space is limited.

toggle

Custom toggle button for the dropdown. Provides toggle function and isOpen state. Defaults to a standard "More" button if not provided.

Basic Usage

<template>
  <MoreActions more-button-text="More Actions">
    <template #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>
  </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">
    <template #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>
  </MoreActions>
</template>

Together Alignment

<template>
  <MoreActions more-button-text="More Actions" more-button-align="together">
    <template #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>
  </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 Styling for Dropdown Items

<template>
  <MoreActions
    more-button-text="More Actions"
    item-in-dropdown-class="tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded"
  >
    <template #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>
  </MoreActions>
</template>

You can also use an object to conditionally apply classes:

<template>
  <MoreActions
    :item-in-dropdown-class="{ 'tw-bg-blue-50': true, 'tw-text-blue-600': true, 'tw-border-blue-200': false }"
  >
    <!-- actions -->
  </MoreActions>
</template>

Custom Toggle Button

<template>
  <MoreActions>
    <template #toggle="{ toggle, isOpen }">
      <Button
        class="tw-flex tw-items-center tw-gap-1.5 tw-px-2 tw-py-1.5 tw-bg-blue-500 tw-text-white tw-rounded tw-text-sm"
        @click="toggle"
      >
        <Icon
          name="chevron-down"
          :style="{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }"
        />
        {{ isOpen ? 'Close Menu' : 'Open Menu' }}
      </Button>
    </template>
    <template #actions>
      <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>
  </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