Simple Menu Bar

3 minutes to read Download PDF Edit

The simple menu bar widget shows a configured menu in the form of a horizontal or vertical bar with images and captions. Items cannot have subitems; the menu structure can only have one level. The menu items 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 a cascading style sheet (CSS) class for the widget. This class will be applied to the widget in the browser and the widget will get the corresponding styling. The class should be a class from the theme that is used in the project. It overrules the default styling of the widget.

Style

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

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 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.

Orientation

This property determines how the simple menu bar is laid out.

Orientation Description
Horizontal The menu items are next to each other and the images are above the captions.
Vertical The menu items are underneath each other and the images are next to the captions.

Default value: Horizontal

Copyright © Mendix. All rights reserved. | Mendix.com | Terms of Use | Privacy Policy