Ribbon JS

HTML5, CSS3 and JavaScript Ribbon Bar. State-of-the-art UI. By Martin Ivanov.

Run Ribbon JS as a HTML5 WebComponent

Stepping away from jQuery? Try VueRibbon, built on top of Vue and ES6.

Ribbon JS is available wrapped as a HTML5 WebComponent, which allow configuration and initialization in the form of plain custom tags. Still, all of the methods and events are available and any number of ribbons created via this approach could coexist on the page.

The Markup and the Attributes

The markup for the HTML5 WebComponent is just a representation of the configuration object of a ribbon with custom tags. Each tag or attribute reflect a key in the configuration of a ribbon instance.


Apart from init(), all other public methods are available for use once the "acidjs-ribbon-component-ready" of the component is triggered. You do not need to call the init() method, because it is called internally.


Apart from "acidjs-ribbon-ready", all other events are available for use once the "acidjs-ribbon-component-ready" of the component is triggered. All of the bindings to custom events should be done in the "acidjs-ribbon-component-ready" handler.

The ribbon instance, created by the tag is a global variable named after the id attribute of the <acidjs-xribbon /> tag, for example - if the id of the tag is ribbon1, the instance of the ribbon will be window.ribbon1. The instance name is returned as instance key in the data object when the "acidjs-ribbon-component-ready" is fired.

Go back to the docs home.