Product Features

Cross-browser compatibility
Support for IE11+
Rich JavaScript API
Flexible customization
Data loading in JSON
Buttons, image buttons, buttons with icons
Ability to add a badge with a number to a button
Two-state buttons (active and inactive)
Ability to add custom HTML content to a button
Input field
Accessibility support

Drop-down menu
Separator
Spacer
Ability to add a title into a toolbar
Ability to add tooltips for controls
Custom icons for toolbar controls
Ability to divide controls into groups
Ability to hide and show controls
Ability to enable and disable controls
Ability to add and remove toolbar controls

How to Build a React Toolbar

Take the following 5 steps to create a React toolbar with DHTMLX:

Create a Toolbar.js file and import files and styles of Toolbar

Create Toolbar class, which extends the Component class

Add an empty container for Toolbar with the reference to it in the el property using the ref property

When the component is initialized, initialize Toolbar and attach the instance of Toolbar to the container with the reference to it in the el property

Specify a set of configuration properties if needed

To learn more check the demo on Github

Why Choose DHTMLX React Toolbar Component?

Create a fully-fledged toolbar menu

dhtmlxToolbar is synonymous with a swift and seamless way to build a custom feature-rich React toolbar menu. The component allows keeping any number of various controls in one place, arranging them in a preferred manner and defining their look and feel. The controls may be divided by spacers and separators. You can also add a title to make your React toolbar more user-friendly.

Choose from a wide range of toolbar controls

Our React toolbar component offers a large selection of controls that serve any special needs. Buttons can contain certain text, icons, and badges with a number displaying the total amount of notifications received by a user. Add an input field with a proper icon to enable content filtering and searching. You can also include a tooltip or a drop-down list with different menu items to facilitate your web app navigation.

Customize your React toolbar as you want

DHTMLX toolbar provides a rich set of numerous customization capabilities. Thus, you can add custom HTML elements to toolbar buttons. Use any desirable icon font pack instead of the default Material Design-based icons. You are able to change the overall look and feel of your React toolbar by adding new CSS classes: background, borders and all other elements are fully customizable.

Use Angular and Vue.js wrappers

Each of the 20+ components of DHTMLX Suite UI library can be adapted with web apps based on React as well as on two other widely-used frameworks: Angular, and Vue.js. Download a 30-day free trial version to assess a complete range of Suite capabilities along with the professional assistance of our technical support team.

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: