# Office 2010 Style Ribbon Toolbar in HTML/CSS/JS

2011-06-08

I have created an implementation of the Office 2010 Ribbon toolbar that can be used in any website. It is written in HTML, CSS, and JS. Try a demo at [https://okgodoit.com/ribbon/](https://okgodoit.com/ribbon/) or watch the [video on YouTube](https://www.youtube.com/watch?v=5YOpn2W-fQ8). Download the source from [GitHub](https://github.com/OkGoDoIt/Office-Ribbon-2010).


Some highlights:




- Light (silver) and dark (black) themes

- 2010-style Backstage feature (optional)

- 2 button sizes

- Buttons can have a disabled state

- Tabs, sections, and buttons can all have custom HTML (such as bold or entities) in their titles

- Optional hot and disabled icon states

- Full HTML in ScreenTip (tooltip) supported

- So far I’ve tested it in Chrome, Firefox, Safari, and IE 8+. I’m still working on IE 7 compatibility, and I haven’t tested it on Opera. It uses the jQuery framework.



There’s still a lot of work left to be done, but I wanted to get this first version out there. Feel free to leave feedback and suggestions in the comments.


Update: [I added this project to GitHub. Check there for updates and feel free to fork it and add your own improvements.](https://github.com/OkGoDoIt/Office-Ribbon-2010)