Name: JavaScript Toolbar with Rich JS API - dhtmlxToolbar
Rating: 4.7 (47 reviews)

View more demos

Compatible with:

Product Features

Custom HTML content
Cross-browser compatibility
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
Ability to add a datepicker control to a toolbar
Accessibility support

How to Create a Toolbar in JavaScript

Follow these 5 simple steps to build an HTML5 toolbar using JavaScript:

Create an HTML file

Include the toolbar js and css source files in the header

Add a container with an id - e.g. “toolbar_container”

Initialize the widget with the dhx.Toolbar object constructor

Load the necessary controls into the toolbar

To learn more check documentation

Why Choose a JavaScript Toolbar Library by DHTMLX?

A complete toolkit for building a full-featured toolbar menu

dhtmlxToolbar offers a smooth and fast way to create a feature-rich JavaScript toolbar, which would be a perfect fit for your app. The structure of the toolbar can be easily modified and allows you to include any number of various controls and group them the way you need. You can add spacers and separators to divide the controls visually and include a title to make a toolbar more user-friendly.

A great variety of JavaScript toolbar controls for any purpose

There is a wide range of controls that you can add to a toolbar for any possible need. Buttons can look like a simple line of text or an image and can also come along with icons. You can equip buttons with badges containing numbers for showing how many notifications a user received in your app. In order to search or filter content in a web app, add an input field with a suitable icon. You can also include a drop-down list with different menu items to navigate between the content of your app. With a datepicker control, end-users are able to select a date.

Endless customization options to meet your needs

In addition to a flexible structure, our HTML toolbar offers numerous customization opportunities. You can create buttons with any kind of custom HTML content in them. Instead of the default Material-based icon font, you are free to choose any other icon font pack. Apart from that, the overall look and feel of a toolbar can be customized via CSS. You can create new CSS classes and apply the desired styles to the background, borders, and all other toolbar elements with ease.

Support for Angular, React, and Vue.js

Just like the whole Suite UI library, dhtmlxToolbar can be integrated into web apps based on three popular frameworks: Angular, React, and Vue.js. The integration is smooth and simple due to the special wrappers we provide in the package with the components. To try it out, download a 30-day evaluation version and make use of the 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: