Menu

Context menu component for displaying a list of actions in a modal.

Basic Usage

import { Popup, Menu } from '@multinaire/ui';

<Popup
  type="sheet"
  renderToggleButton={({ onPress }) => (
    <IconButton icon="More" onPress={onPress} />
  )}
>
  <Menu
    items={[
      { title: 'Edit', leading: 'Edit', onPress: handleEdit },
      { title: 'Share', leading: 'Share', onPress: handleShare },
      { title: 'Delete', leading: 'Trash', destructive: true, onPress: handleDelete },
    ]}
  />
</Popup>

Props

Prop	Type	Default	Description
items	MenuItem[]	—	Ordered list of menu items
leading	ReactElement	—	Custom React element rendered at the leading end of the menu header
trailing	ReactElement	—	Custom React element rendered at the trailing end of the menu header

MenuItem

Property	Type	Description
title	string	Label text of the menu item
leading	IconName	Leading icon displayed at the start of the item
trailing	IconName	Trailing icon displayed at the end of the item
destructive	boolean	Render this menu item with a destructive (error color) style
onPress	() => void	Callback invoked when this item is pressed

Examples

Action Menu

<Popup
  type="sheet"
  renderToggleButton={({ onPress }) => (
    <IconButton icon="More" onPress={onPress} />
  )}
>
  <Menu
    items={[
      { title: 'Copy Link', leading: 'Link', onPress: copyLink },
      { title: 'Share', leading: 'Share', onPress: share },
      { title: 'Report', leading: 'Flag', onPress: report },
    ]}
  />
</Popup>

With Header Content

<Menu
  leading={
    <Container horizontal gap={12} alignItems="center">
      <Avatar source={user.avatar} size={48} />
      <Typography type="title" weight="bold">{user.name}</Typography>
    </Container>
  }
  items={[
    { title: 'View Profile', leading: 'User', onPress: viewProfile },
    { title: 'Send Message', leading: 'Message', onPress: sendMessage },
    { title: 'Block User', leading: 'Block', destructive: true, onPress: blockUser },
  ]}
/>

Settings Menu

<Menu
  items={[
    { title: 'Account Settings', leading: 'Settings', trailing: 'ChevronRight', onPress: openSettings },
    { title: 'Privacy', leading: 'Shield', trailing: 'ChevronRight', onPress: openPrivacy },
    { title: 'Help', leading: 'Help', trailing: 'ChevronRight', onPress: openHelp },
  ]}
  trailing={
    <Typography type="caption" color="neutral" center>
      Version 1.0.0
    </Typography>
  }
/>

Destructive Action

<Menu
  items={[
    { title: 'Edit Post', leading: 'Edit', onPress: editPost },
    { title: 'Archive', leading: 'Archive', onPress: archivePost },
    { title: 'Delete Post', leading: 'Trash', destructive: true, onPress: deletePost },
  ]}
/>