Menu

The Menu component provides a flexible dropdown menu functionality. It leverages the @radix-ui/react-dropdown-menu for accessibility and customization features. The Menu component and its sub-component, MenuItem, can be easily styled and incorporated into your UI for various needs such as navigation menus, options menus, and more.

Usage

The Menu component requires a trigger element to toggle the visibility of the menu and can accept any ReactNode as its children, which typically includes MenuItem components for the menu options.

Basic Menu

A simple example of using the Menu component to create a dropdown menu.

import React from "react";
import { Button, Menu, MenuItem } from "@firecms/ui";

export default function MenuBasicDemo() {
    return (
        <Menu trigger={<Button>Open Menu</Button>}>
            <MenuItem onClick={() => alert("Menu Item 1 clicked")}>Menu Item 1</MenuItem>
            <MenuItem onClick={() => alert("Menu Item 2 clicked")}>Menu Item 2</MenuItem>
            <MenuItem onClick={() => alert("Menu Item 3 clicked")}>Menu Item 3</MenuItem>
        </Menu>
    );
}

Menu with Custom Trigger

Demonstrating how to use a custom element as the trigger for opening the menu.

import React from "react";
import { Menu, MenuItem } from "@firecms/ui";

export default function MenuCustomTriggerDemo() {
    return (
        <Menu trigger={<div style={{ cursor: 'pointer', padding: '10px', background: 'grey', color: 'white' }}>Click me</div>}>
            <MenuItem onClick={() => alert("Action 1")}>Action 1</MenuItem>
            <MenuItem onClick={() => alert("Action 2")}>Action 2</MenuItem>
            <MenuItem onClick={() => alert("Action 3")}>Action 3</MenuItem>
        </Menu>
    );
}

Dense Menu Items

Showing how to make the MenuItem components dense for a more compact menu appearance.

import React from "react";
import { Button, Menu, MenuItem } from "@firecms/ui";

export default function MenuDenseItemsDemo() {
    return (
        <Menu trigger={<Button>Dense Menu</Button>}>
            <MenuItem dense onClick={() => alert("Dense Item 1 clicked")}>Dense Item 1</MenuItem>
            <MenuItem dense onClick={() => alert("Dense Item 2 clicked")}>Dense Item 2</MenuItem>
            <MenuItem dense onClick={() => alert("Dense Item 3 clicked")}>Dense Item 3</MenuItem>
        </Menu>
    );
}