Skip to main content

options

Description

Optional. Specifies a set of options for Menu Bar

Usage

options?: {
id?: string | number;
text?: string;
subtext?: string;
handler?: (ev: IMenuOptionClick) => void;
data?: IMenuOption[];
css?: string;
icon?: string;
type?: string | Component<any>; // @deprecated use `comp` instead. Will be removed in v3.0
comp?: string | Component<any>;
}[];

Parameters

A menu item object in the options array may contain a set of properties. The list of available properties is given below:

  • id - (optional) the id of a menu item
  • text - (optional) the text of a menu item
  • subtext - (optional) a dimmed text displayed to the right of the main item's text, such as a hot key or other additional info
  • icon - (optional) the name of an icon displayed before the text. It converts to adding <i className={item.icon}>, so any icons with the wxi- prefix can be used here, e.g ".wxi-plus" or any customer icons defined on the page. Read more about the usage of icons
  • css- (optional) the name of a CSS class that will be applied to an item
  • type - (optional) the type of an item. It can be a predefined string such as "separator" or a custom React component to render a menu item in place of the default renderer. Will be removed in SVAR 3.0 so use comp instead
  • data - (optional) an array of sub items for a menu item. Used to create a tree-like menu structure; the same as options
  • handler - (optional) a click handler function for the menu item. It receives an object with the parameters described here: onClick
  • comp - (optional) the component used to render the menu item. It can be the name of a built-in component (string) or a custom React component reference

Example

import { useState } from "react";
import MenuBar from "./MenuBar.jsx";

const initialOptions = [
{
id: "file",
text: "File",
data: [
{ id: "file-new", text: "New document", icon: "wxi wxi-file" },
{
id: "file-export",
text: "Export",
icon: "wxi wxi-download",
data: [
{ id: "export-pdf", text: "PDF" },
{ id: "export-txt", text: "TXT" }
]
},
{ id: "file-print", text: "Print" }
],
},
{
id: "edit",
text: "Edit",
data: [
{ id: "edit-cut", text: "Cut", icon: "wxi wxi-content-cut" },
{ id: "edit-copy", text: "Copy", icon: "wxi wxi-content-copy" },
{ id: "edit-paste", text: "Paste", icon: "wxi wxi-content-paste" },
],
},
{
id: "view",
text: "View",
data: [
{ id: "view-fullscreen", text: "Fullscreen" },
{ id: "view-option", text: "..." }
],
},
];

export default function App() {
const [options] = useState(initialOptions);

const clicked = (item) => {
console.log("Menu item clicked:", item);
};

return <MenuBar options={options} onClick={clicked} />;
}

Related article: Loading options

Related sample: Menu bar