MoreMenu
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
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.
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
{
"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:
npm install @heroicons/react@2.2.0