XDS — Design System

MoreMenu@xds/core · XDSMoreMenu v0.0.13

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.

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

Best practices

Guidance	Practices
Do	Use for overflow or secondary actions — keep primary actions visible outside the menu.
Do	Use dividers or sections to group related actions when the menu has many items.
Don't	Hide primary actions inside a MoreMenu — they should be directly visible.

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: () => {}},
      ]}
    />
  );
}

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.

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

Best practices

Guidance	Practices
Do	Use for overflow or secondary actions — keep primary actions visible outside the menu.
Do	Use dividers or sections to group related actions when the menu has many items.
Don't	Hide primary actions inside a MoreMenu — they should be directly visible.

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: () => {}}, ]} /> ); }

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> ); }

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: () => {}}, ]} /> ); }

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: () => {}}], }, ]} /> ); }

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: () => {}}, ]} /> ); }