XDSMoreMenu@xds/core · MoreMenu
Preview coming soon

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.

Best practices

GuidancePractices
DoUse for overflow or secondary actions — keep primary actions visible outside the menu.
DoUse dividers or sections to group related actions when the menu has many items.
Don'tHide primary actions inside a MoreMenu — they should be directly visible.

Import

ts
import {XDSMoreMenu} from '@xds/core/MoreMenu'

Props

PropTypeDescription
itemsrequired
XDSDropdownMenuOption[]Menu items — data array of actions, dividers, and sections. Same type as XDSDropdownMenu items prop.
label
string (default: 'More options')Accessible label for the trigger button (aria-label) and tooltip text.
variant
XDSButtonVariant (default: 'ghost')Visual style variant of the trigger button.
size
XDSButtonSize (default: 'md')Size of the trigger button.
icon
ReactNodeOverride the default three-dot icon. Accepts any ReactNode.
isDisabled
boolean (default: false)Whether the menu trigger is disabled.
children
(item: XDSDropdownMenuItemData) => ReactNodeCustom render function for items. Only called for selectable items (not dividers/sections).
xstyle
StyleXStylesStyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value — not an inline style object like style={{}}.

Examples

Common configurations, variations, and states.
MoreMenu — DefaultBasic three-dot overflow menu with simple text-only action items.
tsx
'use client';
​
import {XDSMoreMenu} from '@xds/core/MoreMenu';
​
export default function MoreMenuDefaultMoreMenu() {
  return (
    <XDSMoreMenu
      items={[
        {label: 'Edit', onClick: () => {}},
        {label: 'Duplicate', onClick: () => {}},
        {label: 'Delete', onClick: () => {}},
      ]}
    />
  );
}
MoreMenu — In ToolbarA three-dot menu alongside icon buttons in a card header toolbar.
tsx
'use client';
​
import {XDSMoreMenu} from '@xds/core/MoreMenu';
import {XDSButton} from '@xds/core/Button';
import {XDSIcon} from '@xds/core/Icon';
import {XDSToolbar} from '@xds/core/Toolbar';
import {XDSHeading} from '@xds/core/Text';
import {XDSCard} from '@xds/core/Card';
import {XDSSection} from '@xds/core/Section';
import {
  ArrowLeftIcon,
  ArrowDownTrayIcon,
  ShareIcon,
  TrashIcon,
} from '@heroicons/react/24/outline';
import * as stylex from '@stylexjs/stylex';
​
const styles = stylex.create({
  card: {
    marginTop: 100,
  },
  moreMenuWrapper: {
    marginInlineEnd: 8,
  },
});
​
export default function MoreMenuInToolbar() {
  return (
    <XDSCard width="100%" height="100%" xstyle={styles.card}>
      <XDSToolbar
        label="Project actions"
        size="sm"
        dividers={['bottom']}
        startContent={
          <XDSButton
            label="Back"
            variant="ghost"
            icon={<XDSIcon icon={ArrowLeftIcon} />}
            isIconOnly
          />
        }
        centerContent={<XDSHeading level={5}>Title</XDSHeading>}
        endContent={
          <>
            <div {...stylex.props(styles.moreMenuWrapper)}>
              <XDSMoreMenu
                label="More actions"
                size="sm"
                items={[
                  {label: 'Export', icon: ArrowDownTrayIcon, onClick: () => {}},
                  {label: 'Share', icon: ShareIcon, onClick: () => {}},
                  {type: 'divider'},
                  {label: 'Delete', icon: TrashIcon, onClick: () => {}},
                ]}
              />
            </div>
            <XDSButton label="Discard" variant="secondary" size="sm" />
            <XDSButton label="Save" variant="primary" size="sm" />
          </>
        }
      />
      <XDSSection />
    </XDSCard>
  );
}
MoreMenu — With DividersA three-dot menu with a divider separating destructive actions from safe ones.
tsx
'use client';
​
import {XDSMoreMenu} from '@xds/core/MoreMenu';
import {
  PencilIcon,
  DocumentDuplicateIcon,
  TrashIcon,
} from '@heroicons/react/24/outline';
​
export default function MoreMenuWithDividers() {
  return (
    <XDSMoreMenu
      variant="secondary"
      items={[
        {label: 'Edit', icon: PencilIcon, onClick: () => {}},
        {label: 'Duplicate', icon: DocumentDuplicateIcon, onClick: () => {}},
        {type: 'divider'},
        {label: 'Delete', icon: TrashIcon, onClick: () => {}},
      ]}
    />
  );
}
MoreMenu — With SectionsA three-dot menu with actions organized into labeled groups.
tsx
'use client';
​
import {XDSMoreMenu} from '@xds/core/MoreMenu';
import {
  PencilIcon,
  DocumentDuplicateIcon,
  TrashIcon,
} from '@heroicons/react/24/outline';
​
export default function MoreMenuWithSections() {
  return (
    <XDSMoreMenu
      variant="secondary"
      label="Document actions"
      items={[
        {
          type: 'section',
          title: 'Actions',
          items: [
            {label: 'Edit', icon: PencilIcon, onClick: () => {}},
            {
              label: 'Duplicate',
              icon: DocumentDuplicateIcon,
              onClick: () => {},
            },
          ],
        },
        {
          type: 'section',
          title: 'Danger zone',
          items: [{label: 'Delete', icon: TrashIcon, onClick: () => {}}],
        },
      ]}
    />
  );
}

Showcase source

tsx
'use client';
​
import {useState} from 'react';
import {XDSMoreMenu} from '@xds/core/MoreMenu';
​
export default function MoreMenuShowcase() {
  const [isMenuOpen, setIsMenuOpen] = useState(true);
​
  return (
    <XDSMoreMenu
      isMenuOpen={isMenuOpen}
      onOpenChange={setIsMenuOpen}
      items={[
        {label: 'Edit', onClick: () => {}},
        {label: 'Duplicate', onClick: () => {}},
        {label: 'Delete', onClick: () => {}},
      ]}
    />
  );
}