Navigation: Create Ebooks And Publications > Designing User Interface >

Using The Menu Editor





The Menu Editor in HTML Executable is a powerful feature that allows you to manage and customize the menus in your eBook or HTML application. With it, you can access menu items of the menu bar, the app menu button, the context menu, the tray icon, and associate commands with them.


Accessing the Menu Editor


The menu bar displays the standard GUI menus at the top side of the main window (while the App Menu button displays the menu when clicked). By default, a publication contains four pre-defined menu items: File, Edition, Navigate and Help with various menu commands that let your end users navigate through your web pages, select and copy text parts, print pages... The properties of these four menu items can be modified thanks to the Menu Bar component. To edit custom items, go to the Application Settings => Components page, select "Menu Bar" or 'Menu Button" and click the "Edit" button.


The context menu pops up when clicking with the right-hand mouse button. It contains common navigation and edition commands like Back, Next, Copy to clipboard... and it can be customized according to your needs with the Context Menu component. Finally, a pop-up menu can be displayed when the end user right-clicks the tray icon if the latter is enabled. You can change the items by clicking "Edit popup menu" in the Tray Icon tab.


Menu Editor Overview



  To access the menu items, click the `Edit Items` button or double click on the `Items` property. This will open a sub-window that displays the menu tree, allowing you to manage all menu items:



The menu tree lists all of the menu items. The menu tree is hierarchical. This means that parent menus can have child items. Each item in the tree represents a menu item in your eBook or application.


In case of the main menu bar, the four predefined menus (File, Edition, Navigate and Help) are already in the list: you can select them in order to add new menu children.


In HTML Executable, text enclosed within percentage signs, such as `%SFile%`, are referred to as resource strings. These strings are placeholders that will be replaced by the corresponding localized text defined in the Localization page. For instance, `%SFile%` will be replaced by the text associated with the identifier `SFile` in the list of resource strings. This allows for the proper localization of your application or eBook based on the user's language settings.


  To add a new menu item, click New Item to add a top menu item or click New Subitem, the new menu item will become a child of the selected item (in the menu tree).


  To edit a menu item, select it in the menu tree and you can then modify its properties (which are shown in the Properties editor).


  To delete a menu item, select it in the menu tree and you can then remove it.


  You can reorder the menu items using drag/drop operations.


Menu Item Properties and Actions



While you can modify all properties, the most important ones are:


Caption: This is the text that will appear on the menu item.

ImageIndex: This property allows you to set an image for the menu item (defined in the SVG image list).


In addition, under the `Actions` section, you can choose the action that will be executed by the eBook or application when the menu item is selected by the user.


  Learn more about all actions available


Remember to click `Apply changes` after editing a menu item to save the changes.


Menu separator


Specify a hyphen character (-) as the value of Caption for the menu item to indicate that the menu item is a separator.


Separators should have their action set to "Do nothing".


Saving and Loading Menu Templates


You can save your menu configuration as a template for future use. To do this, click on the `Save model` button. To load a previously saved template, click on the `Load model` button.