Ribbon JS

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

Discrete Tool, Command or Tab Properties Object

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

Since version 4.2.0, Ribbon JS allows the setting of discrete custom properties to tabs, tools and commands. These properties can be set either in the configuration of a tool or tab (the props key) or via the setToolProps, getToolProps, getTabProps and setTabProps methods of the ribbon. The data of the prop keys is returned also by the events, triggered by the ribbon.

To see these properties in action, open your browser's console and play with the tools and tabs or check the code code for the example below.

A real-life implementation, utilizing the props object is being used on the contact form of ribbonjs.com. Check the contact form configuration here (tabs[0].ribbons[0].tools[0].commands).

More Ribbon JS Demos

Check the rest of the demos. There's much more cool stuff you haven't seen yet. Thinking of a feature that you would like to see in Ribbon JS? Suggest it here and it will make it in the next release.