React Menu

Name: React Menu Navigation Component - dhtmlxMenu
Rating: 4.8 (34 reviews)

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

Download

View more demos

Compatible with:

Vue.js

JavaScript

Angular

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

Check the demo on Github

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: