< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and More

React Toolbar

Flexible React toolbar component with various types of controls and unlimited customization capabilities. Part of the modern and multifunctional Suite UI library.

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

Why Choose DHTMLX React Toolbar Component?

picture for features
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.
picture for features
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.
picture for features
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:

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 dhtmlxToolbar integration into your app? Contact us