Mendix 7 is no longer supported unless you have Extended Support (for details, please contact Mendix Support). Mendix 7 documentation will remain available for customers with Extended Support until July, 2024.

Navigation Tree

Last modified: June 29, 2022

The navigation tree widget shows a configured menu in the form of a tree. Items can have subitems in which case the main item can be expanded. The menu structure of the navigation tree can have three levels. In the end a Menu Item points to either the page or the microflow that will opened or started when the item is clicked.

Common Properties

Name

The internal name of the widget. You can use this to give sensible names to widgets. The name property also appears in the generated HTML: the widget DOM element automatically includes the class mx-name-{NAME}, which can be useful for Selenium testing.

Class

The class property allows you to specify one or more cascading style sheet (CSS) classes for the widget. The classes should be separated by a space. The classes will be applied to the widget in the browser and the widget will get the corresponding styling. The classes should be classes in the theme that is used in the project. It overrules the default styling of the widget.

Styling is applied in the following order:

  1. the default styling defined by the theme the project uses
  2. the Class property of the widget
  3. the Style property of the widget.

You can see which widgets in a page have styling applied via the class or style property by clicking the Show styles button.

Location and effect of the Show styles button

Style

The style property allows you to specify additional CSS styling. If a class is also specified, this styling is applied after the class.

For example:

background-color:lightblue; color:red;

will result in red text on a blue background.

You can see which widgets in a page have styling applied via the style or class property by clicking the Show styles button.

General Properties

The items that are shown in the menu widget are determined by the menu source. A menu widget is either filled from a menu configured in the Navigation document or a Menu document.

Value Description
Project Navigation The menu items are taken from one of the menus defined in the Navigation document. Use this for the main menu of your application.
Menu Document The menu items are taken from a Menu document. Use menu documents for auxiliary menus.

Default value: Project navigation

If the menu source is ‘Project navigation’, this property specify which of the three menus that can be configured in the Navigation document will be used to fill the menu widget.

Value Description
Desktop Use the ‘Desktop’ menu
Tablet Use the ‘Tablet’ menu
Phone Use the ‘Phone’ menu

Default value: Desktop

If the menu source is ‘Menu document’, you can select a Menu document that will be used to fill the menu widget.