Tuimorphic

Menu

Dropdown menu for actions and navigation with keyboard support.

Import

import { Menu, MenuItem, MenuSeparator } from 'tuimorphic';

Basic Usage

<Menu trigger={<Button>Actions</Button>}>
  <MenuItem onSelect={() => console.log('Edit')}>Edit</MenuItem>
  <MenuItem onSelect={() => console.log('Delete')}>Delete</MenuItem>
</Menu>

Props

PropTypeDefaultDescription
triggerReact.ReactElement-Element that triggers the menu to open
childrenReact.ReactNode-Menu items and content
classNamestring-Additional CSS class names
PropTypeDefaultDescription
onSelect() => void-Callback when item is selected
disabledboolean-Whether the item is disabled
childrenReact.ReactNode-Item content
classNamestring-Additional CSS class names
PropTypeDefaultDescription
classNamestring-Additional CSS class names

Variants

Basic

<Menu trigger={<Button>Actions</Button>}>
  <MenuItem onSelect={() => console.log('Edit')}>Edit</MenuItem>
  <MenuItem onSelect={() => console.log('Delete')}>Delete</MenuItem>
</Menu>

With Separator

<Menu trigger={<Button>File</Button>}>
  <MenuItem onSelect={handleNew}>New</MenuItem>
  <MenuItem onSelect={handleOpen}>Open</MenuItem>
  <MenuSeparator />
  <MenuItem onSelect={handleSave}>Save</MenuItem>
  <MenuItem disabled>Save As...</MenuItem>
</Menu>

User Actions Menu

<Menu trigger={<Button>Options</Button>}>
  <MenuItem onSelect={handleAction}>Available Action</MenuItem>
  <MenuItem disabled>Unavailable Action</MenuItem>
</Menu>

Compound Components

For advanced control:

import {
  MenuRoot,
  MenuTrigger,
  MenuPortal,
  MenuPositioner,
  MenuPopup,
} from 'tuimorphic';
 
<MenuRoot>
  <MenuTrigger render={<Button>Options</Button>} />
  <MenuPortal>
    <MenuPositioner sideOffset={4}>
      <MenuPopup>
        <MenuItem onSelect={handleAction}>Action</MenuItem>
      </MenuPopup>
    </MenuPositioner>
  </MenuPortal>
</MenuRoot>

Previous

Navigation

Next

BreadCrumbs

On this page