# MoreMenu

- Page: https://jiguang132.com/resources/astryx/docs/more-menu
- Resource: Astryx (https://jiguang132.com/resources/astryx.md)
- All guides: https://jiguang132.com/resources/astryx/docs.md

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.

## Installation

```bash
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
```

Requires React 19+, base CSS and a Theme provider. See [Setup](/resources/astryx/docs/getting-started).

## 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.

| Prop | Type | Default | Description |
|---|---|---|---|
| items * | DropdownMenuOption[] |  | Menu items: data array of actions, dividers, and sections. Same type as DropdownMenu items prop. |
| label | string | 'More options' | Accessible label for the trigger button (aria-label) and tooltip text. |
| variant | ButtonVariant | 'ghost' | Visual style variant of the trigger button. |
| size | ButtonSize | 'md' | Size of the trigger button. |
| icon | ReactNode |  | Override the default three-dot icon. Accepts any ReactNode. |
| isDisabled | boolean | false | Whether the menu trigger is disabled. |
| placement | 'above' \| 'below' \| 'start' \| 'end' | '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' | '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' | '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={{}}. |

### Usage guidance

- 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.
- Avoid: Hide primary actions inside a MoreMenu; they should be directly visible.

### Theming API

```json
{
  "targets": [
    {
      "className": "astryx-more-menu"
    }
  ]
}
```

### Anatomy

- **Trigger button**: Icon-only Button that provides the visible overflow-menu entry point.
- **Icon-resolved trigger icon**: Default semantic three-dot artwork resolved from the active Icon registry.
- **Caller-rendered trigger content**: Arbitrary React content supplied directly as the trigger icon override.
- **Menu surface**: DropdownMenu panel that also carries MoreMenu’s current public target.
- **Pointer action row**: Action or nested-action trigger row rendered by DropdownMenu in the anchored presentation.
- **Touch action row**: ListItem button rendered by DropdownMenu in the BottomSheet presentation.


## Examples

- More Menu: A basic three-dot menu with simple action items.
- MoreMenu — Bottom Sheet: A visible overflow trigger that opens actions in a BottomSheet. Use this presentation for short action sets on compact touch surfaces.
- MoreMenu — Default: Basic three-dot overflow menu with simple text-only action items.
- MoreMenu — With Dividers: A three-dot menu with a divider separating destructive actions from safe ones.
- MoreMenu — With Sections: A three-dot menu with actions organized into labeled groups.

## Complete example dependencies

Some examples import optional icons. The per-example install command in the examples list identifies exactly what that example needs. For all examples on this page:

```bash
npm install @heroicons/react@2.2.0
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt