MultinaireMenu

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

Basic Usage

import { MultinaireModal, MultinaireMenu } from '@multinaire/multinaire-design';

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

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

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

With Header Content

<MultinaireMenu
  leading={
    <MultinaireContainer horizontal gap={12} alignItems="center">
      <MultinaireAvatar source={user.avatar} size={48} />
      <MultinaireText type="title" weight="bold">{user.name}</MultinaireText>
    </MultinaireContainer>
  }
  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

<MultinaireMenu
  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={
    <MultinaireText type="caption" color="neutral" center>
      Version 1.0.0
    </MultinaireText>
  }
/>

Destructive Action

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