The Menu is a graphical user interface that serve as navigation headers for your application or site.
<ul id = 'menu'></ul><script>
var menuObj = new Menu({ items: [{ text: 'Home' }, { text: 'Contact Us' },{ text: 'Login' }]});
menuObj.appendTo("#menu");
</script>Specifies the animation settings for the sub menu open.
Defaults to { duration: 400, easing: ‘ease’, effect: ‘SlideDown’ }
string
Defines class/multiple classes separated by a space in the Menu wrapper.
Defaults to ”
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
Specifies whether to enable / disable the scrollable option in Menu.
Defaults to false
Specifies mapping fields from the dataSource.
Defaults to { itemId: “id”, text: “text”, parentId: “parentId”, iconCss: “iconCss”, url: “url”, separator: “separator”,children: “items” }
MenuItemModel[] | Object[]
Specifies menu items with its properties which will be rendered as Menu.
Defaults to []
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to undefined
string
Specified the orientation of Menu whether it can be horizontal or vertical.
Defaults to ‘Horizontal’
boolean
Specifies whether to show the sub menu or not on click. When set to true, the sub menu will open only on mouse click.
Defaults to false
string
Specifies the template for Menu item.
Defaults to null
Adds the handler to the given event listener.
Returns void
Appends the control within the given HTML element
| Parameter | Type | Description |
|---|---|---|
| selector (optional) | string | HTMLElement |
Target element where control needs to be appended |
Returns void
When invoked, applies the pending property changes immediately to the component.
Returns void
Destroys the widget.
Returns void
This method is used to enable or disable the menu items in the Menu based on the items and enable argument.
| Parameter | Type | Description |
|---|---|---|
| items | string[] |
Text items that needs to be enabled/disabled. |
| enable | boolean |
Set true/false to enable/disable the list items. |
| isUniqueId (optional) | boolean |
Set true if it is a unique id. |
Returns void
This method is used to hide the menu items in the Menu based on the items text.
Returns void
It is used to insert the menu items after the specified menu item text.
Returns void
It is used to insert the menu items before the specified menu item text.
| Parameter | Type | Description |
|---|---|---|
| items | MenuItemModel[] |
Items that needs to be inserted. |
| text | string |
Text item before that the element to be inserted. |
| isUniqueId (optional) | boolean |
Set true if it is a unique id. |
Returns void
Applies all the pending property changes and render the component again.
Returns void
Removes the handler from the given event listener.
Returns void
It is used to remove the menu items from the Menu based on the items text.
Returns void
This method is used to show the menu items in the Menu based on the items text.
| Parameter | Type | Description |
|---|---|---|
| items | string[] |
Text items that needs to be shown. |
| isUniqueId (optional) | boolean |
Set true if it is a unique id. |
Returns void
Dynamically injects the required modules to the component.
Returns void
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before closing the menu.
Triggers while rendering each menu item.
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before opening the menu item.
EmitType<Event>
Triggers once the component rendering is completed.
EmitType<OpenCloseMenuEventArgs>
Triggers while closing the menu.
EmitType<OpenCloseMenuEventArgs>
Triggers while opening the menu item.
Triggers while selecting menu item.