Menu

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>

Properties

animationSettings

MenuAnimationSettingsModel

Specifies the animation settings for the sub menu open.

Defaults to { duration: 400, easing: ‘ease’, effect: ‘SlideDown’ }

cssClass

string

Defines class/multiple classes separated by a space in the Menu wrapper.

Defaults to ”

enableHtmlSanitizer

boolean

Defines whether to allow the cross-scripting site or not.

Defaults to false

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableScrolling

boolean

Specifies whether to enable / disable the scrollable option in Menu.

Defaults to false

fields

FieldSettingsModel

Specifies mapping fields from the dataSource.

Defaults to { itemId: “id”, text: “text”, parentId: “parentId”, iconCss: “iconCss”, url: “url”, separator: “separator”,children: “items” }

hamburgerMode

boolean

Specifies whether to enable / disable the hamburger mode in Menu.

Defaults to false

items

MenuItemModel[] | Object[]

Specifies menu items with its properties which will be rendered as Menu.

Defaults to []

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

orientation

string

Specified the orientation of Menu whether it can be horizontal or vertical.

Defaults to ‘Horizontal’

showItemOnClick

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

target

string

Specifies target element to open/close Menu while click in Hamburger mode.

Defaults to ”

template

string

Specifies the template for Menu item.

Defaults to null

title

string

Specifies the title text for hamburger mode in Menu.

Defaults to ‘Menu’

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

close

Closes the Menu if it is opened in hamburger mode.

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Destroys the widget.

Returns void

enableItems

This method is used to enable or disable the menu items in the Menu based on the items and enable argument.

Returns void

hideItems

This method is used to hide the menu items in the Menu based on the items text.

Returns void

insertAfter

It is used to insert the menu items after the specified menu item text.

Returns void

insertBefore

It is used to insert the menu items before the specified menu item text.

Returns void

open

This method is used to open the Menu in hamburger mode.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

removeItems

It is used to remove the menu items from the Menu based on the items text.

Returns void

showItems

This method is used to show the menu items in the Menu based on the items text.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

beforeClose

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before closing the menu.

beforeItemRender

EmitType<MenuEventArgs>

Triggers while rendering each menu item.

beforeOpen

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before opening the menu item.

created

EmitType<Event>

Triggers once the component rendering is completed.

onClose

EmitType<OpenCloseMenuEventArgs>

Triggers while closing the menu.

onOpen

EmitType<OpenCloseMenuEventArgs>

Triggers while opening the menu item.

select

EmitType<MenuEventArgs>

Triggers while selecting menu item.