MenuBox

Beta

Containerized menu surface for grouped action items.

Installation

npm install @xaui/native

Import

import { MenuBox, MenuBoxItem } from '@xaui/native/menubox'

Basic Usage

Minimal example showing the component with its default configuration.

import { MenuBox } from '@xaui/native/menubox'

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

Basic Settings MenuBox

Group navigation-like actions in a compact settings card.

import { MenuBox, MenuBoxItem } from '@xaui/native/menubox'
import { Typography } from '@xaui/native/typography'

export function BasicMenuBoxExample() {
  return (
    <MenuBox>
      <MenuBoxItem itemKey="account" title="Account" endContent={<Typography>›</Typography>} />
      <MenuBoxItem itemKey="notifications" title="Notifications" endContent={<Typography>›</Typography>} />
      <MenuBoxItem itemKey="privacy" title="Privacy" endContent={<Typography>›</Typography>} />
    </MenuBox>
  )
}

Descriptions and Disabled Item

Show secondary text and disable unavailable rows.

import { MenuBox, MenuBoxItem } from '@xaui/native/menubox'
import { Typography } from '@xaui/native/typography'

export function DescriptiveMenuBoxExample() {
  return (
    <MenuBox spacing={6}>
      <MenuBoxItem
        itemKey="wifi"
        title="Wi-Fi"
        description="Connected to Office-5G"
        endContent={<Typography>On</Typography>}
      />
      <MenuBoxItem
        itemKey="bluetooth"
        title="Bluetooth"
        description="No device connected"
      />
      <MenuBoxItem
        itemKey="cellular"
        title="Cellular"
        description="Unavailable on this device"
        isDisabled
      />
    </MenuBox>
  )
}

Custom Appearance

Control spacing, radius, and per-item text styling.

import { MenuBox, MenuBoxItem } from '@xaui/native/menubox'
import { Typography } from '@xaui/native/typography'

export function CustomAppearanceMenuBoxExample() {
  return (
    <MenuBox
      radius="md"
      spacing={8}
      themeColor="secondary"
      backgroundColor="#f8fafc"
      style={{ padding: 6 }}
    >
      <MenuBoxItem
        itemKey="theme"
        title="Theme"
        description="System default"
        endContent={<Typography>Auto</Typography>}
        customAppearance={{ title: { fontWeight: '700' } }}
      />
      <MenuBoxItem
        itemKey="language"
        title="Language"
        description="English"
        endContent={<Typography>›</Typography>}
      />
    </MenuBox>
  )
}