Ribbon JS

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

Ribbon 4, Better than Ever

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

Ribbon JS is arguably the best recreation of the MS Officetm ribbon bar, using JavaScript, CSS3, and HTML5. It is a lightweight control, which is ready to use on websites, web-based WYSIWYG editors, sophisticated back-end systems, mail applications, complex file managers, and JavaScript-heavy apps. It has everything you would expect from a ribbon bar – comprehensive and fully documented API, amazing command handling, huge set of inbuilt tools, capability to add custom tools via client-side templates, cool looks, support for AngularJS directives and is also available optionally wrapped as a full-blown HTML5 WebComponent. Last but not least, it only takes a few minutes to deploy, configure, and run.

Take a look below or check the demos for more application scenarios.

Classic Look and Feel

Metro Look and Feel

Since version 4.1.0 Ribbon JS includes inbuilt, hassle-free support for flat ("Metro") look and feel. And much more.

Ribbon JS Features and Tools

The latest version of Ribbon JS boasts a huge set of inbuilt tools and the ability to seamlessly add custom tools through its rich API and client-side templates. Here's what we've got (and don't forget to check the demos to see these in action):