Skip to main content

Features

This page contains structured information that will help you to start working with DHTMLX Menu and go into deep dive on its functionality.

How to start with DHTMLX Menu

In this section you can find out how to initialize Menu, how to add controls inside a Menu and how to integrate a Menu into your applications.

TopicDescription
Basic initializationLearn how to initialize a Menu

Loading data into Menu

TopicDescription
Loading data into MenuRead how to load the initial data into Menu
Initialization with config.dataThe example shows how to load data into Menu on the initialization stage
Initialization with data.load()The example shows how to load data from external file
Initialization with data.parse()The example shows how to load data from a local data source
Initialization with external TreeCollectionThe example shows how to load data from external TreeCollection

Context Menu initialization

TopicDescription
Initialization of Context MenuLearn how to initialize and show DHTMLX Context Menu on the page (Example 1, Example 2)
TopicDescription
MenuItemLearn how to add a MenuItem control into the menu (Example)
Custom HTMLLearn how to add an item with custom HTML content into the menu (Example)
SpacerLearn how to add a Spacer control into the menu (Example)
SeparatorLearn how to add a Separator control into the menu (Example)

Integration

TopicDescription
Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Menu with React (Demo)
Angular integrationLearn how to use DHTMLX Menu with Angular (Demo)
Vue integrationLearn how to use DHTMLX Menu with Vue.js (Demo)

How to customize Menu

In this section you can learn how to configure the style of Menu and its controls.

TopicDescription
Configuring type of navigationLearn how to configure the action that opens menu options (click or pointer) (Example)
Adding HTML content into itemsLearn how to add a custom image into the menu item (Example)
Applying custom iconsLearn how to add custom icons to Menu items (Example)
Styling MenuLearn how to customize Menu (Example)
List of CSS classesA set of CSS classes provided by the DHTMLX library

How to work with data in Menu

This section will tell you how to use TreeCollection API for working with data of Menu, i.e. edit, add, remove, rearrange items, etc.

TopicDescription
Adding / removing itemsLearn how to add and remove items in Menu (Example)
Updating an itemLearn how to update items in Menu (Example)
Setting item's configurationLearn how to set a text label for menu item or add a shortcut to a menu option
Rearranging itemsLearn how to move menu items to another position
Iterating itemsLearn how to apply the necessary logic to all (or some) menu items
TreeCollection APICheck the list of all available TreeCollection API

How to work with Menu items

In this section you may study how to hide and show, enable and disable Menu items.

TopicDescription
Enabling / disabling itemsLearn how to disable and enable menu items (Example)
Is disabledLearn how to check whether a menu item is disabled
Showing / hiding itemsLearn how to hide and show menu items (Example)

How to work with selection

In this section you will find the ways of work with selection functionality.

TopicDescription
Setting selectionLearn how to select a particular item (Example)
Is selectedLearn how to check whether a menu item is selected
Getting selected itemsLearn how to get the selected items
Removing selectionLearn how to remove selection from a selected item

How to work with Menu events

This section explains how to work with Menu events.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Menu events (Example)

API reference

In this section you can find out corresponding references of Menu and Menu controls API.

TopicDescription
Menu methodsCheck the list of Menu methods
Menu eventsCheck the list of Menu events
Menu propertiesCheck the list of Menu properties
MenuItem propertiesCheck the list of properties of the MenuItem control
Custom HTML propertiesCheck the list of properties of the Custom HTML control
Separator propertiesCheck the list of properties of the Separator control
Spacer propertiesCheck the list of properties of the Spacer control
TreeCollection APICheck the API of TreeCollection to work with Menu data

Common functionality

In this section you will learn about common functionality of the library which can be useful while working with Menu.

TopicDescription
Touch supportLearn how to work with touch support
TypeScript supportLearn how to work with TypeScript
AwaitRedrawLearn how to perform the code after the component’s rendering

Any questions left?


info

Do you need more functionality? Feel free to share your suggestions in the comments below!