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[]	-	Array of menu items
leading	ReactElement	-	Content above menu items
trailing	ReactElement	-	Content below menu items

MenuItem

Property	Type	Description
title	string	Menu item label
leading	MultinaireIcons	Leading icon
trailing	MultinaireIcons	Trailing icon
destructive	boolean	Use destructive (error) styling
onPress	() => void	Press handler

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 },
  ]}
/>