Skip to content

Menu Component

Description

The Menu component is a floating menu that appears next to an anchor element. It supports different placements, can be used for contextual actions, and can be wrapped inside a Popper.

Props

Prop Type Default Description
open boolean false Controls the visibility of the menu.
anchorEl HTMLElement | null | undefined undefined The element that the menu is anchored to.
anchorPosition { top: number; left: number } undefined Manually position the menu.
onClose () => void undefined Callback when the menu is closed.
placement "bottom-start" | "bottom-end" | "top-start" | "top-end" "bottom-start" The position of the menu relative to the anchor.
zIndex number DefaultZIndex.Menus Controls the stacking order.
preventBrowserContextMenu boolean false Prevents the default browser context menu from appearing.
Prop Type Default Description
onClick () => void undefined Function triggered when the item is clicked.
startIcon ReactNode | React.ElementType undefined Icon to be displayed before the text.
Prop Type Default Description
label string Required The text displayed on the submenu item.
startIcon ReactNode | React.ElementType undefined Icon to be displayed before the text.
children ReactNode Required The submenu content.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { useState } from "react";
import { Menu, MenuItem, SubMenu, Popper, Divider, Button } from "@nomana-it/liberty-core"

export const MenuExample = () => {
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
  const [open, setOpen] = useState(false);

  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button onClick={handleOpen}>Open Context Menu</Button>

      <Popper open={open} anchorEl={anchorEl} onClose={handleClose} placement="bottom-end">
        <Menu anchorEl={anchorEl} open={open} onClose={handleClose} placement="bottom-end">
          <MenuItem onClick={() => alert("Action 1 clicked")}>Action 1</MenuItem>
          <MenuItem onClick={() => alert("Action 2 clicked")}>Action 2</MenuItem>
          <Divider />
          <SubMenu label="More Options">
            <MenuItem onClick={() => alert("Sub Action 1 clicked")}>Sub Action 1</MenuItem>
            <MenuItem onClick={() => alert("Sub Action 2 clicked")}>Sub Action 2</MenuItem>
          </SubMenu>
          <Divider />
          <MenuItem onClick={() => alert("Closing menu")} onClose={handleClose}>Close</MenuItem>
        </Menu>
      </Popper>
    </div>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core