< Suite 6.2 with New Grid & TreeGrid Editors, Row Drag-n-Drop, Flexible Columns, and Much 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.

dhtmlxToolbar is equipped with various controls for each and every possible command:

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
  • 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:

demo-screenshot

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

Try All UI Components for Free

All JavaScript UI components are part of the dhtmlxSuite library. You can download the free trial version of Suite and benefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

PRO features

Need help with dhtmlxToolbar integration into your app? Contact us