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

JavaScript Toolbar Library

A fully customizable JavaScript/HTML5 toolbar with an entirely adjustable structure and diverse types of controls.
Part of the leading-edge Suite UI library.

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:
1
Create an HTML file
2
Include the toolbar js and css source files in the header
3
Add a container with an id - e.g. “toolbar_container”
4
Initialize the widget with the dhx.Toolbar object constructor
5
Load the necessary controls into the toolbar

Why Choose a JavaScript Toolbar Library by DHTMLX?

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

Other Suite Components

demo-screenshot

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

Try All UI Widgets for Free

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

30 days of free evaluation

Official technical support

Full toolkit of 23 components

PRO features

Need help with dhtmlxToolbar integration into your app? Contact us