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

JavaScript Ribbon Toolbar

dhtmlxRibbon is a highly customizable JavaScript/HTML ribbon with a wide variety of controls and flexible configuration.
Part of the leading-edge Suite UI library.

Product Features

  • Custom HTML content
  • Cross-browser compatibility
  • Full control with JavaScript API
  • Broad customization
  • Data loading in the JSON format
  • 11 types of controls (buttons, input, spacer, datepicker, etc.)
  • Grouping controls in blocks
  • Two-state buttons (active and inactive)
  • Badges with numbers for buttons
  • Ability to add tooltips to controls
  • Ability to hide and show controls
  • Ability to enable and disable controls
  • Ability to add, rearrange, copy, and clear controls
  • Custom icons for ribbon controls
  • Accessibility support

How to Build a JavaScript Ribbon Toolbar with DHTMLX?

Follow 5 simple steps to quickly create a JavaScript/HTML ribbon control with DHTMLX:
Create an HTML file
Include the ribbon js and css source files in the header
Add a container with an id - e.g. “ribbon_container”
Initialize the widget with the dhx.Ribbon object constructor
Load a set of controls into the ribbon

Why Choose DHTMLX Ribbon Control?

Intuitive navigation panel with ribbon interface

dhtmlxRibbon is a JavaScript control that allows you to create a nice-looking ribbon interface. It represents a feature-rich toolbar with different button types organized in logical blocks and provides end users with an intuitive navigation panel. Among the available controls are buttons, image buttons, input fields, selection buttons, separators, spacers, and titles.

Fully manageable via JavaScript API

The work with our HTML ribbon bar is straightforward due to a variety of API methods, which enable you to hide and show, enable and disable, add, rearrange and copy ribbon controls and whatnot. It’s easy to build nested blocks with several rows and columns of controls to make a complex navigation bar. You can separate groups of controls with spacers and separators and add tooltips to controls.

Highly customizable appearance

One of the greatest advantages of our JavaScript/HTML5 ribbon is its full customization via CSS. In order to change the look and feel of every ribbon element, you only need to create new CSS classes with custom settings. Besides, you’re free to change the default Material-based icon font pack with a custom one. Buttons can be supplied with custom HTML content and badges with numbers for showing notifications.

Support for Angular, React, and Vue.js

All our components are compatible with the leading client-side frameworks such as Angular, React, and Vue.js. We have developed special wrappers, which would assist you in integrating dhtmlxRibbon into your web apps based on these technologies. You may evaluate how it works during a 30-day trial period making use of our documentation and help of the 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 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 dhtmlxRibbon integration into your app? Contact us