Menu Editor
Reference documentation for the Menu Editor
Last updated
Was this helpful?
Reference documentation for the Menu Editor
Last updated
Was this helpful?
The Servoy Menu Editor is a graphical tool used to manage Servoy Menus and their hierarchical structure of menu items. It provides full control over item properties, allows nesting of submenus, and supports custom properties that can extend functionality or connect the menu item to runtime logic.
This editor opens:
Automatically after creating a new menu.
Or manually by right-clicking an existing menu and selecting Edit menu option.
Menu Name: A read-only field displaying the internal name of the menu (e.g., demo_menu).
Menu StyleClass: An optional style class to style the menu container.
Custom Property Table: A table where global custom properties can be defined. It includes:
Custom Property Name (left column)
Custom Property Type (right column)
Each row includes a delete (🗑️) button to remove the property.
Add Custom Property: A button that opens a prompt to enter:
The name of the new property.
The type (dropdown) of the new property, such as string, valuelist, int, etc.
Each item can be expanded or collapsed to show subitems.
Action icons appear when hovering over an item:
➕ Add Child Menu Item
➕ Add Sibling Menu Item
🗑️ Delete Menu Item
General Properties:
Name – Internal name of the menu item.
Text – Label shown to users.
Enabled – Checkbox to enable/disable the item.
Icon StyleClass – CSS class for an icon.
StyleClass – Additional CSS styling.
Tooltip Text – Optional hover text.
Permissions – Controls visibility and access based on user roles.
DataGrid Properties: (for DataGrid customMainMenu property)
hideForColIds – Comma-separated list of column IDs for which to hide the item.
isSeparator – Renders this item as a separator.
showForColIds – Columns for which this menu item should be visible.
Navbar Properties:
attributes – Optional object of attributes.
dataProviderValue – Bound data value.
displayType – Dropdown (e.g., MENU_ITEM, BUTTON, etc.)
inputButtonStyleClass – Styling for the button.
inputButtonText – Button label.
isActive – Boolean active state.
isDivider – Boolean separator indicator.
position – Placement (LEFT, RIGHT, etc.).
tabindex – Tab navigation index.
userData – Custom data.
valuelist – Valuelist name or binding.
Sidenav Properties
badgeStyleClass – Optional class for a badge.
badgeText – Text to show in the badge.
data – Optional bound data.
formName – Form to navigate to when clicked.
isDivider – Show as a divider.
relationName – Name of a relation if used for related data navigation.
Custom Properties
Once custom properties are defined (see section below), each property appears here with:
A label matching the defined name.
A field or component depending on its type (e.g., text box, dropdown, boolean checkbox, etc).
Clicking Add Custom Property button opens a dialog where the user enters:
Custom Property Name – A unique identifier for the property. It will be used in scripting and configuration.
Custom Property Type – The data type of the property. The supported types are:
string – A text value.
valuelist – A reference to a valuelist.
int – A numeric value.
relation – A relation name.
dataprovider – A data provider from the form or globally scoped.
form – A reference to a form.
boolean – A true/false value.
Once defined, these custom properties can be configured per menu item in the Custom Properties section:
Here are the steps for using the Menu Editor:
Set the Menu Name and Style
At the top of the editor, enter a Menu Name (identifier for the menu) - in case this is a newly created menu.
Optionally, define a Menu StyleClass to apply a CSS class to the entire menu.
Add and Organize Menu Items
In the Menu Items panel on the left:
➕ Add Submenu Item – Adds a new child item under the selected item.
➕ Add Sibling Item – Adds a new item at the same level.
🗑️ Delete – Removes the menu item.
Click an item to view and edit its properties in the right panel.
Items can be nested to create multi-level menus.
Configure Menu Item Properties
With a menu item selected, use the right panel to set its configuration.
Properties are grouped by context:
General Properties (all menus):
name – Internal identifier.
text – Label shown to users.
enabled – Enables or disables the item.
tooltipText, styleClass, iconStyleClass
permissions – Controls visibility and behavior based on user roles.
Add Custom Properties (Optional)
Click Add Custom Property button at the top-right of the editor.
Enter a custom property name and choose a custom property type, such as: string, int, boolean, form, relation, valuelist, dataprovider
Once added, custom fields will appear in every menu item's Custom Properties section, where you can assign values.
Edit or Remove Items and Properties
To rename or modify a menu item, click it in the tree and update its fields in the right panel.
To remove an item, click the 🗑️ icon beside it in the left panel.
To remove a custom property, click the 🗑️ icon in the Custom Properties table at the top of the editor.
Save and Exit
Changes are saved automatically.
Simply close the editor when you're done.
DataGrid Properties (when used in customMainMenu property of a component)
Navbar Properties (when used as a menu for a component)
Sidenav Properties (when used as a menu for a component)
