MoreMenu·component·@astryxdesign/core

More Menu

MoreMenu is a three-dot button that opens a list of actions. Use it for secondary actions that don't need to be always visible, like in table rows, card headers, or toolbars.

Open in Playground @astryxdesign/core/MoreMenu

Showcases and examples

5 documented examples

More Menu

A basic three-dot menu with simple action items.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · more-menu-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {MoreMenu} from '@astryxdesign/core/MoreMenu';

export default function MoreMenuShowcase() {
  return (
    <MoreMenu
      items={[
        {label: 'Edit', onClick: () => {}},
        {label: 'Duplicate', onClick: () => {}},
        {label: 'Delete', onClick: () => {}},
      ]}
    />
  );
}

Usage

MoreMenu is a three-dot button that opens a list of actions. Use it for secondary actions that don't need to be always visible, like in table rows, card headers, or toolbars.

Use for overflow or secondary actions; keep primary actions visible outside the menu.
Use dividers or sections to group related actions when the menu has many items.
Use presentation="adaptive" when the visible overflow trigger should open a thumb-reachable BottomSheet on compact touch devices.
Hide primary actions inside a MoreMenu; they should be directly visible.

Typed props

Prop	Type and behavior
`items`	`DropdownMenuOption[]` · required Menu items: data array of actions, dividers, and sections. Same type as DropdownMenu items prop.
`label`	`string` · default 'More options' Accessible label for the trigger button (aria-label) and tooltip text.
`variant`	`ButtonVariant` · default 'ghost' Visual style variant of the trigger button.
`size`	`ButtonSize` · default 'md' Size of the trigger button.
`icon`	`ReactNode` Override the default three-dot icon. Accepts any ReactNode. Slot: Icon
`isDisabled`	`boolean` · default false Whether the menu trigger is disabled.
`placement`	`'above' \| 'below' \| 'start' \| 'end'` · default 'below' Position of the menu relative to the trigger. Logical: start/end resolve against the menu's own inherited direction (RTL mirrors).
`alignment`	`'start' \| 'center' \| 'end'` · default 'start' Alignment along the placement axis. Use 'end' to align the menu with the trigger's trailing edge, which is usually what an overflow menu wants.
`presentation`	`'popover' \| 'bottom-sheet' \| 'adaptive'` · default 'popover' Presentation policy forwarded to DropdownMenu. `adaptive` keeps the anchored popover on pointer-based layouts and uses a BottomSheet at 768px and below when the primary pointer is coarse.
`onOpenChange`	`(isOpen: boolean) => void` Callback fired when the menu opens or closes.
`xstyle`	`StyleXStyles` StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.

Anatomy

Trigger button · required

Icon-only Button that provides the visible overflow-menu entry point.

Icon-resolved trigger icon · optional

Default semantic three-dot artwork resolved from the active Icon registry.

Caller-rendered trigger content · optional

Arbitrary React content supplied directly as the trigger icon override.

Menu surface · required

DropdownMenu panel that also carries MoreMenu’s current public target.

Pointer action row · optional

Action or nested-action trigger row rendered by DropdownMenu in the anchored presentation.

Touch action row · optional

ListItem button rendered by DropdownMenu in the BottomSheet presentation.

Theming

Targets

astryx-more-menu