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.
Menu initialization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize a Menu |
Loading data into Menu
| Topic | Description |
|---|---|
| Loading data into Menu | Read how to load the initial data into Menu |
| Initialization with config.data | The 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 TreeCollection | The example shows how to load data from external TreeCollection |
Context Menu initialization
| Topic | Description |
|---|---|
| Initialization of Context Menu | Learn how to initialize and show DHTMLX Context Menu on the page (Example 1, Example 2) |
Menu controls
| Topic | Description |
|---|---|
| MenuItem | Learn how to add a MenuItem control into the menu (Example) |
| Custom HTML | Learn how to add an item with custom HTML content into the menu (Example) |
| Spacer | Learn how to add a Spacer control into the menu (Example) |
| Separator | Learn how to add a Separator control into the menu (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX Menu with React (Demo) |
| Angular integration | Learn how to use DHTMLX Menu with Angular (Demo) |
| Vue integration | Learn 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.
| Topic | Description |
|---|---|
| Configuring type of navigation | Learn how to configure the action that opens menu options (click or pointer) (Example) |
| Adding HTML content into items | Learn how to add a custom image into the menu item (Example) |
| Applying custom icons | Learn how to add custom icons to Menu items (Example) |
| Styling Menu | Learn how to customize Menu (Example) |
| List of CSS classes | A 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.
| Topic | Description |
|---|---|
| Adding / removing items | Learn how to add and remove items in Menu (Example) |
| Updating an item | Learn how to update items in Menu (Example) |
| Setting item's configuration | Learn how to set a text label for menu item or add a shortcut to a menu option |
| Rearranging items | Learn how to move menu items to another position |
| Iterating items | Learn how to apply the necessary logic to all (or some) menu items |
| TreeCollection API | Check 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.
| Topic | Description |
|---|---|
| Enabling / disabling items | Learn how to disable and enable menu items (Example) |
| Is disabled | Learn how to check whether a menu item is disabled |
| Showing / hiding items | Learn 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.
| Topic | Description |
|---|---|
| Setting selection | Learn how to select a particular item (Example) |
| Is selected | Learn how to check whether a menu item is selected |
| Getting selected items | Learn how to get the selected items |
| Removing selection | Learn how to remove selection from a selected item |
How to work with Menu events
This section explains how to work with Menu events.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn 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.
| Topic | Description |
|---|---|
| Menu methods | Check the list of Menu methods |
| Menu events | Check the list of Menu events |
| Menu properties | Check the list of Menu properties |
| MenuItem properties | Check the list of properties of the MenuItem control |
| Custom HTML properties | Check the list of properties of the Custom HTML control |
| Separator properties | Check the list of properties of the Separator control |
| Spacer properties | Check the list of properties of the Spacer control |
| TreeCollection API | Check 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.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| AwaitRedraw | Learn how to perform the code after the component’s rendering |
Any questions left?
Do you need more functionality? Feel free to share your suggestions in the comments below!