Skip to main content

options

Description​

a set of menu options

Type​

array

Example​

<script>
    // plain structure
    const options = [
        { id: "add-task:child", text: "Child task" },
        { id: "add-task:above", text: "Task above" },
        { id: "add-task:below", text: "Task below" },
    ];
</script>

<Menu {options}/>

Details​

The Menu widget can have a more complex tree-like structure. Here's an example:

<script>
    // tree-like structure
    const options = [
        { id: "add-task", text: "Add", icon: "wxi wxi-plus", data:[
            { id: "child", text: "Child task" },
            { id: "above", text: "Task above" },
            { id: "below", text: "Task below" }
        ]}
    ];
</script>

<Menu {options}/>

Properties of an item object​

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

  • id - the id of a menu item
  • text - the text of a menu item
  • subtext - a dimmed text displayed to the right of the main item's text, such as a hot key or other additional info
  • icon - the name of an icon displayed before the text. It converts to adding <i class={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 - the name of a CSS class that will be applied to an item
  • type - the type of an item. It can be a "separator" or a custom type registered as a menu item (e.g. type:"button)
  • data - an array of sub items for a menu item. Used to create a tree-like menu structure
  • handler - a click handler function, takes an item object as a parameter

Related article: Loading options

Related sample: Menu basic