Menu

ComponentsBeta

Primitives for composing menus—such as a set of actions or functions.

import React from 'react';
import { Menu, MenuItem, MenuLabel, MenuSeparator } from '@minddrop/ui';

export const MenuDemo = () => (
  <div style={{ width: 240 }}>
    <Menu>
      <MenuItem
        label="Add title"
        icon="title"
        keyboardShortcut={['Ctrl', 'T']}
      />
      <MenuItem
        label="Add note"
        icon="note"
        keyboardShortcut={['Ctrl', 'Shift', 'N']}
      />
      <MenuItem hasSubmenu label="Turn into" icon="turn-into" />
      <MenuSeparator />
      <MenuLabel>Actions</MenuLabel>
      <MenuItem
        label="Copy link"
        icon="link"
        keyboardShortcut={['Ctrl', 'Shift', 'C']}
      />
      <MenuItem
        label="Move to"
        icon="arrow-up-right"
        keyboardShortcut={['Ctrl', 'Shift', 'M']}
      />
      <MenuItem
        label="Add to"
        icon="inside"
        keyboardShortcut={['Ctrl', 'Shift', 'A']}
      />
    </Menu>
  </div>
);

export default MenuDemo;

Features

Supports item icon, submenu indicator, and keyboard shortcut.
Separator for visually separating groups of items.
Label for labeling groups of items.

Usage

Menu components are intended for internal use and do not support any interactions by default. To create a dropdown or context menu, use the DropdownMenu or ContextMenu components which build upon these components.

Import the components from the @minddrop/ui package.

import { Menu, MenuGroup, MenuItem } from '@minddrop/ui';

export default () => {
  return (
    <Menu>
      <MenuItem
        label="Add title"
        icon="title"
        keyboardShortcut={['Ctrl', 'T']}
      />
      <MenuItem
        label="Add note"
        icon="note"
        keyboardShortcut={['Ctrl', 'Shift', 'N']}
      />
      <MenuItem hasSubmenu label="Turn into" icon="turn-into" />
      <MenuSeparator />
      <MenuLabel>Actions</MenuLabel>
      <MenuItem
        label="Copy link"
        icon="link"
        keyboardShortcut={['Ctrl', 'Shift', 'C']}
      />
      <MenuItem
        label="Move to"
        icon="arrow-up-right"
        keyboardShortcut={['Ctrl', 'Shift', 'M']}
      />
      <MenuItem
        label="Add to"
        icon="inside"
        keyboardShortcut={['Ctrl', 'Shift', 'A']}
      />
    </Menu>
  );
};

API Reference

MenuProps extends React.HTMLAttributes<HTMLDivElement>.

Prop	Type	Default
`children`	`node`	No default value

MenuItem

MenuItemProps extends React.HTMLAttributes<HTMLDivElement>.

Prop	Type	Default
`label*`	`node`	No default value
`icon`	`IconName \| ReactElement`	No default value
`hasSubmenu`	`boolean`	No default value
`keyboardShortcut`	`string[]`	No default value
`disabled`	`boolean`	No default value