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

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:
1
Create a Toolbar.js file and import files and styles of Toolbar
2
Create Toolbar class, which extends the Component class
3
Add an empty container for Toolbar with the reference to it in the el property using the ref property
4
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
5
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

demo-screenshot

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