Fan Menu

A floating button that fans its actions out along an arc. The items spring out one after another, the plus turns into a cross, and picking an item folds the fan away. Place it with style; the items are positioned from the button, so keep room for the arc on that side. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add fan-menu

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/fan-menu.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { Text, View } from "react-native";
import { FanMenu } from "@/components/ui/fan-menu";

export default function Example() {
  return (
    <View style={{ flex: 1 }}>
      <FanMenu
        style={{ position: "absolute", right: 24, bottom: 24 }}
        items={[
          { label: "New note", icon: <Text>✎</Text>, onPress: () => console.log("note") },
          { label: "Email", icon: <Text>✉</Text>, onPress: () => console.log("email") },
        ]}
      />
    </View>
  );
}

Props