< DHTMLX Suite 8.4 Release: API Updates for Grid/TreeGrid, Chart, Toolbar, ComboBox, and New Samples

React Menu

Being one of the 20+ Suite UI library components, React menu bar offers easy navigation for web apps and interfaces,
along with flexible customization.

Product Features

  • Cross-browser compatibility
  • Support for IE11+
  • Full control with JavaScript API
  • Wide customization opportunities
  • Ability to add a context menu
  • Ability to add spacers and separators
  • Ability to hide/show menu options
  • Accessibility support
  • Ability to disable/enable menu options
  • Ability to rearrange menu options
  • Ability to attach a context menu to an HTML object or a mouse event
  • Data loading in the JSON format
  • Hotkeys support
  • Custom icons for menu items

How to Integrate a React Menu Component

Follow these 5 steps to initialize React menu navigation with DHTMLX:
Create a Menu.js file and import files and styles of Menu
Create Menu class, which extends the Component class
Add an empty container for Menu with the reference to it in the el property using the ref property
When the component is initialized, initialize Menu and attach the instance of Menu to the container with the reference to it in the el property
Specify a set of configuration properties if needed

Why Choose React Menu by DHTMLX?

Full-fledged React menu component

dhtmlxMenu is a quick and easy way to add a menu bar to users’ web apps. The component will be your navigation assistant with multiple features and countless customization options. You can initialize a context right-click menu or React dropdown menu that appears when a user hovers the mouse pointer over it. Menu options should be loaded in the JSON format.

Flexible and feature-rich API

You should have no trouble working with our React menu bar. Multiple menu methods allow showing/hiding, adding/removing, and rearranging the items. It’s possible to add spacers, vertical and horizontal separators. Menu items can be equipped with icons, hotkeys, and badges to show the number of new messages. You can add a React context menu and attach it to an HTML object or mouse event.

Ability to control React menu styling

dhtmlxMenu is highly customizable as any of the 20+ Suite UI components. The menu appearance can be modified by adjusting the size, painting the background, shape-shifting borders, styling hover selectors, etc. You can change the default Material-based icons to any other icon font pack and add custom styling with new CSS classes.

Special wrappers for Angular and Vue.js

All dhtmlxSuite widgets are compatible with React, Angular, and Vue.js. Thus, you can use wrappers to painlessly integrate dhtmlxMenu into web apps based on those client-side frameworks. Try out the DHTMLX UI library by downloading a free 30-day trial version and receive professional technical support.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Other Suite Components


File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All UI components for React are part of the dhtmlxSuite library. You can download the free trial version of Suite andbenefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

Compatibility with React, Angular, and Vue.js

Need help with dhtmlxMenu integration into your app? Contact us