XDSDropdownMenuItem@xds/core · DropdownMenu

Usage

A dropdown menu that displays a list of actionable items in a popup triggered by a button. Use to present action options as a next step in a process, or to offer contextual actions without cluttering the interface.

Best practices

GuidancePractices
DoKeep menu items concise and action-oriented so users can scan options quickly.
DoUse sections and dividers to group related actions when the menu has many items.
Don'tUse a DropdownMenu for navigation — use a navigation component instead.
Don'tPlace more than 10–12 items in a single menu without grouping them into sections.

Import

ts
import {XDSDropdownMenuItem} from '@xds/core/DropdownMenu'

Props

PropTypeDescription
icon
XDSIconTypeIcon to display before the label. See `npx xds docs icons` for valid semantic names.
label
ReactNodePrimary label text.
description
ReactNodeSecondary description text displayed below the label.
children
ReactNodeAdditional content rendered after the label and description.
xstyle
StyleXStylesStyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value — not an inline style object like style={{}}.

Showcase source

tsx
'use client';
​
import {XDSDropdownMenu, XDSDropdownMenuItem} from '@xds/core/DropdownMenu';
​
const PencilIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
  </svg>
);
​
const CopyIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" {...props}>
    <rect x="9" y="9" width="13" height="13" rx="2" />
    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
  </svg>
);
​
const ShareIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" {...props}>
    <circle cx="18" cy="5" r="3" />
    <circle cx="6" cy="12" r="3" />
    <circle cx="18" cy="19" r="3" />
    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
  </svg>
);
​
const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" {...props}>
    <polyline points="3 6 5 6 21 6" />
    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
  </svg>
);
​
export default function DropdownMenuItemShowcase() {
  return (
    <XDSDropdownMenu button={{label: 'Actions'}} isMenuOpen onOpenChange={() => {}}>
      <XDSDropdownMenuItem
        icon={PencilIcon}
        label="Edit"
        description="Modify this item"
        onClick={() => {}}
      />
      <XDSDropdownMenuItem
        icon={CopyIcon}
        label="Duplicate"
        description="Create a copy"
        onClick={() => {}}
      />
      <XDSDropdownMenuItem
        icon={ShareIcon}
        label="Share"
        onClick={() => {}}
      />
      <XDSDropdownMenuItem
        icon={TrashIcon}
        label="Delete"
        description="This action cannot be undone"
        onClick={() => {}}
      />
    </XDSDropdownMenu>
  );
}