FloatingMenu

The FloatingMenu component is an expandable menu that hovers over the content, providing quick access to a set of related actions or options. It’s useful in scenarios where screen space is limited, or where users need to access secondary actions without navigating away from the main content. For instance, in a text editor, a floating menu could provide formatting options when a user highlights text, or in a mapping application, it could offer tools for drawing or measuring directly on the map.

Code 

import FloatingMenu from "@lumina-design/core/FloatingMenu";
    
const floating_buttons = [
  {
    icon: <LuminaIcon.Home width={20} height={20} />,
    click: () => console.log("clicked")
  },
  {
    icon: <LuminaIcon.Briefcase width={20} height={20} />,
    click: () => console.log("clicked")
  },
  {
    icon: <LuminaIcon.MobileAndroid width={20} height={20} />,
    click: () => console.log("clicked")
  },
  {
    icon: <LuminaIcon.Phone width={20} height={20} />,
    click: () => console.log("clicked")
  }
];



<FloatingMenu
  menuIdentifier={{ enable: true }}
  location="top-left"
  buttons={floating_buttons}
  mainButtonIcon={<LuminaIcon.Info width={20} height={20} />}
  className="mock-floating-menu"
/>