The NavOverflow control allows to use a navigation bar in your apps. The navigation bar can have any number of items and subitems. It's responsive and customizable with the properties that you can see below. You can also take a look at the Navbar control.

The NavOverflow controls is different than the Navbar control. Can be used also as an app navigation bar, but, the NavOverflow do not use a drawer menu when the items are collapsed, but a menu similar to the one used by the Dropdown control menu.

The NavOverflow control put at your disposition the below designtime properties or variables. Designtime means here that these properties are only available in designtime and not in runtime.

• Top property
• Left property
• Width property
• Height property
• Locked property

The NavOverflow control put at your disposition the below runtime properties or variables. You can set almost all these variables in designtime, and, they are also available to be use when the app is running. Note that we named here these variables in a capitalized way, because is like you can see it in the designtime control's inspector, however, at runtime we use the lower camel case way.

• Name property
• Event property
• Title property
• Items property
• Item property
• ItemIndex property
• Classes property
• Hidden property

The NavOverflow control put at your disposition the below methods. You can use these methods in runtime in order to perform various control related tasks.

• appendItem() method
• insertItem() method
• removeItem() method

The NavOverflow control put at your disposition the below events handlers:

• ItemClick event
• Click event
• DblClick event
• Focus event
• Blur event
• MouseUp event
• MouseDown event
• MouseMove event
• MouseEnter event
• MouseLeave event
• ContextMenu event
• Events variables

Designtime. Integer variable. The Top property stores the top position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Designtime. Integer variable. The Left property stores the left position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Designtime. Integer variable. The Width property stores the width of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Designtime. Integer variable. The Height property stores the height of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Designtime. Boolean variable. The Locked property determines if the control can be moved or resized in app view designer or not. Set a "false" value mean the control can be moved and resized. Set a "true" value (by default) mean the control cannot be moved nor resized. Remember that this control property is only for designtime and is not available in runtime.

Runtime. String variable. The Name control property stores the name of the NavOverflow control as you set in designtime. The Name property value must be unique for the same app view, dialog or frame, that is, it's possible to have more than one "navoverflow1" in the app, if that controls resides in different app views, dialogs or frames. Note that you must consider this variable as read only: change the name of a control in runtime can cause unexpected results.

Runtime. Mixed variable. The Event control property stores the "event" variable received in all the control events. This variable can contain the target (HTML element of the control) that fire the event and more useful stuff.

Runtime. String variable. The Title control property stores some small but descriptive text, mainly to be used to be show that text when the user place the mouse cursor into the control.

// Set a new title for the control views.view1.navoverflow1.title = 'My new title';

Runtime. Array of objects variable. The Items control property stores all the items of the NavOverflow control. This variable is an array of objects, since every NavOverflow item must be an object. You can set this property at runtime, but, also at designtime, by using the NavOverflow Items dialog These objects / items can have the below properties:

// Add a navoverflow item views.view1.navoverflow1.items = [ {text: "My Item", icon: "fa-solid fa-info-circle", actived: false, disabled: false, myownproperty: "my own value"} ];

Runtime. Object variable. This variable is "null" by default, but, it's filled with the pressed NavOverflow Item in the ItemClick event. Take a look at the Items property, in which you can see the mandatory and optionals properties for every item in the NavOverflow control.

Runtime. Number variable. This variable is "-1" by default, but, it's filled with the pressed NavOverflow Item index in the ItemClick event. This item index is the index (starting by zero) of the pressed item, in the NavOverflow Items property.

Runtime. String variable. The Classes control property stores one or more additionals CSS classes (space separated) to be applied to the control.

// Set some additional classes for the control views.view1.navoverflow1.classes = 'one-class another-class';

Runtime. Boolean variable. The Hidden control property determines if the control appear visible to the user or not. Set to "true" to hide the control, or to "false" to show the control (by default).

// Hide navoverflow1 views.view1.navoverflow1.hidden = true; // Show navoverflow1 views.view1.navoverflow1.hidden = false; // Toggle navoverflow1 views.view1.navoverflow1.hidden = !views.view1.navoverflow1.hidden;

Runtime method. You can use this NavOverflow control method in order to append a new text item at the end of the NavOverflow. This method admits the below arguments:

// Append a new text item at the end of the NavOverflow views.view1.navoverflow1.appendItem('My new item text'); // Append a new text item at the end of the NavOverflow (and activated it) views.view1.navoverflow1.appendItem('My new item text', true); // Append a new text item at the end of the NavOverflow (and disabled it) views.view1.navoverflow1.appendItem('My new item text', false, true);

Runtime method. You can use this NavOverflow control method in order to insert a new text item at the specified index of the NavOverflow. This method admits the below arguments:

// Insert a new text item at the first position of the NavOverflow views.view1.navoverflow1.insertItem(0, 'My new item'); // Insert a new text item at the first position of the NavOverflow (and activated it) views.view1.navoverflow1.insertItem(0, 'My new item', null, true); // Insert a new text item at the first position of the NavOverflow (and disabled it) views.view1.navoverflow1.insertItem(0, 'My new item', null, false, true);

Runtime method. You can use this NavOverflow control method in order to remove a specific menu item of the NavOverflow. This method admits the below argument:

// Remove the first item of the NavOverflow views.view1.navoverflow1.removeItem(0);

The ItemClick event handler is fired when the user click in one of the NavOverflow items. The pressed item is stored in the NavOverflow Item property. See also the available events variables.

The Click event handler is fired when the user click or tap into the NavOverflow control. See also the available events variables.

The DblClick (Double Click) event handler is fired when the user double click or double tap into the NavOverflow control. See also the available events variables.

The Focus event handler is fired when the when the NavOverflow control receive the user focus. This event is the partner of the Blur event that you can see below. See also the available events variables.

The Blur event handler is fired when the when the NavOverflow control loss the user focus. This event is the partner of the Focus event that you can see above. See also the available events variables.

The MouseUp event handler is fired when the user up the mouse into the NavOverflow control. See also the available events variables.

The MouseDown event handler is fired when the user down the mouse into the NavOverflow control. See also the available events variables.

The MouseMove event handler is fired when the user move the mouse into the NavOverflow control. See also the available events variables.

The MouseEnter event handler is fired when the user enter the mouse into the NavOverflow control. See also the available events variables.

The MouseLeave event handler is fired when the user leave the mouse from the NavOverflow control. See also the available events variables.

The ContextMenu event handler is fired when the browser must shown the context menu of the the NavOverflow control, which occur when the user click with the right mouse button into the NavOverflow control. See also the available events variables.

The below JavaScript variables are available in all the referred NavOverflow control events handlers:

---