JavaScript Ribbon Toolbar

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.