XauiXaui

Menu

Beta

Popup menu with anchored placement and actionable items.

Installation

npm install @xaui/native

Import

import { Menu, MenuItem } from '@xaui/native/menu'

Basic Usage

Minimal example showing the component with its default configuration.

import { Menu } from '@xaui/native/menu'


export function Example() {
  return <Menu />
}

Basic Menu

Controlled open/close state with simple items.

import { useState } from 'react'
import { Button } from '@xaui/native/button'
import { Menu, MenuItem } from '@xaui/native/menu'


export function BasicMenuExample() {
  const [visible, setVisible] = useState(false)


  return (
    <Menu
      visible={visible}
      onDismiss={() => setVisible(false)}
      onItemPress={itemKey => {
        console.log('Pressed menu item:', itemKey)
        setVisible(false)
      }}
      trigger={
        <Button variant="bordered" onPress={() => setVisible(true)}>
          Open menu
        </Button>
      }
    >
      <MenuItem itemKey="profile" title="Profile" />
      <MenuItem itemKey="settings" title="Settings" />
      <MenuItem itemKey="logout" title="Logout" />
    </Menu>
  )
}

Position and Max Height

Open above trigger and constrain long menus.

import { useState } from 'react'
import { Button } from '@xaui/native/button'
import { Menu, MenuItem } from '@xaui/native/menu'


const actions = Array.from({ length: 12 }, (_, i) => `Action ${i + 1}`)


export function PositionedMenuExample() {
  const [visible, setVisible] = useState(false)


  return (
    <Menu
      visible={visible}
      position="top"
      maxHeight={220}
      onDismiss={() => setVisible(false)}
      trigger={<Button onPress={() => setVisible(true)}>Open top menu</Button>}
    >
      {actions.map(action => (
        <MenuItem key={action} title={action} onPress={() => setVisible(false)} />
      ))}
    </Menu>
  )
}

Start/End Content and Disabled Item

Attach icons/shortcuts and disable unavailable actions.

import { useState } from 'react'
import { Button } from '@xaui/native/button'
import { Menu, MenuItem } from '@xaui/native/menu'
import { Typography } from '@xaui/native/typography'


export function RichMenuExample() {
  const [visible, setVisible] = useState(false)


  return (
    <Menu
      visible={visible}
      onDismiss={() => setVisible(false)}
      trigger={<Button onPress={() => setVisible(true)}>More</Button>}
    >
      <MenuItem
        title="New file"
        startContent={<Typography>📄</Typography>}
        endContent={<Typography>⌘N</Typography>}
        onPress={() => setVisible(false)}
      />
      <MenuItem
        title="Rename"
        startContent={<Typography>✏️</Typography>}
        onPress={() => setVisible(false)}
      />
      <MenuItem
        title="Delete"
        startContent={<Typography>🗑️</Typography>}
        isDisabled
      />
    </Menu>
  )
}