onClick

Description

Fires on clicking a menu bar item or outside the menu bar

Usage

onClick?: (ev: {
  context?: any;
  action: IMenuOption;   // @deprecated use `option` instead. Will be removed in v3.0 
  option: IMenuOption; 
  event?: MouseEvent;    
}) => void;

Parameters

• ev - an event object with the next parameters:
  • context - (optional) an object for which menu was called
  • action - (required) the object of selected (clicked) menu item, empty if menu was closed by an outside click (for the MenuOption parameters description refer to options) - @deprecated: use option instead. Will be removed in v3.0
  • option - (required) same as action
  • event - (optional) a native DOM MouseEvent

Example

import { useState } from "react";

function Example({ options }) {
  const [message, setMessage] = useState("");

  const clicked = (ev) => {
    const action = ev.action;
    setMessage(action ? `clicked on ${action.id}` : "closed");
  };

  return (
    <>
      <MenuBar options={options} onClick={clicked} />
      <div>{message}</div>
    </>
  );
}

---

Related article: Catching the change of a clicked option

Related sample: Menu bar