Source: https://app-studio-6167b.web.app/docs/DropdownMenu

@app-studio/components

# DropdownMenu

A versatile component for displaying a list of interactive items in a popup, triggered by another element.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu.tsx)

## Import

```ts
import { DropdownMenu } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { DropdownMenu } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';
import { Button, CopyIcon, EditIcon, DeleteIcon, DownloadIcon, ShareIcon } from '@app-studio/components';

export const DefaultDropdownMenu = () => {
  const handleCopy = () => alert('Copy clicked');
  const handleEdit = () => alert('Edit clicked');
  const handleDelete = () => alert('Delete clicked');
  const handleDownload = () => alert('Download clicked');
  const handleShare = () => alert('Share clicked');

  const items: any[] = [
    {
      id: 'copy',
      label: 'Copy',
      icon: <CopyIcon widthHeight={16} />,
      onClick: handleCopy,
    },
    {
      id: 'edit',
      label: 'Edit',
      icon: <EditIcon widthHeight={16} />,
      onClick: handleEdit,
    },
    {
      id: 'divider-1',
      divider: true,
    },
    {
      id: 'delete',
      label: 'Delete',
      icon: <DeleteIcon widthHeight={16} />,
      onClick: handleDelete,
    },
    {
      id: 'more',
      label: 'More Options',
      items: [
        {
          id: 'download',
          label: 'Download',
          icon: <DownloadIcon widthHeight={16} />,
          onClick: handleDownload,
        },
        {
          id: 'share',
          label: 'Share',
          icon: <ShareIcon widthHeight={16} />,
          onClick: handleShare,
        },
      ],
    },
    {
      id: 'disabled',
      label: 'Disabled Option',
      disabled: true,
    },
  ];

  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Text marginBottom={10}>Default Dropdown Menu</Text>
      <DropdownMenu trigger={<Button>Open Menu</Button>} items={items} />
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**DropdownMenu**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `trigger` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L13) |
| `items` Required | `DropdownMenuItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L15) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L17) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L19) |
| `side` | `Position` `"bottom"``"left"``"right"``"top"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L21) |
| `align` | `Alignment` `"start"``"center"``"end"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L23) |
| `defaultOpen` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L24) |
| `views` | `DropdownMenuStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L26) |

### DropdownMenu.Trigger

**DropdownMenu.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L32) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L34) |

### DropdownMenu.Content

**DropdownMenu.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` Required | `DropdownMenuItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L41) |
| `side` | `Position` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L43) |
| `align` | `Alignment` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L45) |
| `views` | `{ menu?: ViewProps; item?: ViewProps; divider?: ViewProps; icon?: ViewProps; submenuIndicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L47) |

### DropdownMenu.Item

**DropdownMenu.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `item` Required | `DropdownMenuItem` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L62) |
| `views` | `{ item?: ViewProps; icon?: ViewProps; submenuIndicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L64) |

### DropdownMenu.Divider

**DropdownMenu.Divider**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ divider?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L75) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.