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 http://okgodoit.com/ribbon/ or watch the video on YouTube. Download the source from GitHub.

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.