FabMenu

Beta

Expandable floating action menu with multiple contextual actions.

Installation

npm install @xaui/native

Import

import { FabMenu, FabMenuItem } from '@xaui/native/fab-menu'

Basic Usage

Minimal example showing the component with its default configuration.

import { FabMenu } from '@xaui/native/fab-menu'

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

Basic Menu

Uncontrolled menu with three actions.

import { FabMenu, FabMenuItem } from '@xaui/native/fab-menu'
import { AddIcon } from '@xaui/icons/add'
import { CloseIcon } from '@xaui/icons/close'
import { CameraIcon } from '@xaui/icons/camera'
import { ImageIcon } from '@xaui/icons/image'
import { ShareIcon } from '@xaui/icons/share'

export function BasicFabMenuExample() {
  return (
    <FabMenu
      icon={<AddIcon size={24} />}
      expandedIcon={<CloseIcon size={24} />}
      themeColor="primary"
      showOverlay
    >
      <FabMenuItem icon={<CameraIcon size={20} />} label="Take photo" />
      <FabMenuItem icon={<ImageIcon size={20} />} label="Gallery" />
      <FabMenuItem icon={<ShareIcon size={20} />} label="Share" />
    </FabMenu>
  )
}

Controlled State

Control open/close state with isExpanded and onToggle.

import { useState } from 'react'
import { FabMenu, FabMenuItem } from '@xaui/native/fab-menu'
import { AddIcon } from '@xaui/icons/add'
import { CloseIcon } from '@xaui/icons/close'
import { PencilIcon } from '@xaui/icons/pencil'
import { StarIcon } from '@xaui/icons/star'

export function ControlledFabMenuExample() {
  const [expanded, setExpanded] = useState(false)

  return (
    <FabMenu
      icon={<AddIcon size={24} />}
      expandedIcon={<CloseIcon size={24} />}
      isExpanded={expanded}
      onToggle={setExpanded}
      label="Actions"
      themeColor="secondary"
      radius="full"
    >
      <FabMenuItem icon={<PencilIcon size={20} />} label="Edit" />
      <FabMenuItem icon={<StarIcon size={20} />} label="Favorite" />
    </FabMenu>
  )
}

Custom Appearance

Tune overlay, list spacing, and toggle container styles.

import { FabMenu, FabMenuItem } from '@xaui/native/fab-menu'
import { AddIcon } from '@xaui/icons/add'
import { CameraIcon } from '@xaui/icons/camera'
import { ImageIcon } from '@xaui/icons/image'

export function CustomAppearanceFabMenuExample() {
  return (
    <FabMenu
      icon={<AddIcon size={24} />}
      themeColor="tertiary"
      customAppearance={{
        overlay: { backgroundColor: 'rgba(15, 23, 42, 0.45)' },
        menuContainer: { gap: 10 },
        menuItem: { marginBottom: 2 },
        fab: { borderWidth: 1, borderColor: '#00000022' },
      }}
    >
      <FabMenuItem icon={<CameraIcon size={20} />} label="Camera" />
      <FabMenuItem icon={<ImageIcon size={20} />} label="Library" isDisabled />
    </FabMenu>
  )
}