Office 2010 Style Ribbon Toolbar in HTML/CSS/JS

Posted on June 8, 2011 by Roger

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 at http://www.youtube.com/watch?v=5YOpn2W-fQ8. Download the source from http://okgodoit.com/ribbon/ribbon.zip.

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.

Please note that you legally should license the ribbon UX from Microsoft (for free) at http://msdn.microsoft.com/en-us/office/aa973809.

This entry was posted in Projects. Bookmark the permalink.
  • Steve

    Roger -
    Many thanks!

    I found these two functions to be a helpful addition:
    [hoping they post properly]
    $.fn.switchToTab = function(tabid) { for (var item in tabNames) { var thisTabId = tabNames[item]; if(thisTabId == tabid) that.switchToTabByIndex(item); } }        $.fn.selectedTab = function() {  for (var item in tabNames) { var thisTabId = tabNames[item]; if ($(‘#ribbon #ribbon-tab-header-strip’).find(‘#ribbon-tab-header-’+item).hasClass(‘sel’)) return tabNames[item]; } return -1; }

  • Quannetdidong

    I want to set default tab = 2 ? help me.

  • http://www.OkGoDoIt.com OkGoDoIt

    $(‘#ribbon’).ribbon().switchToTabByIndex(2)

    That should work, although I admit it’s not obvious.  Perhaps I should implement a helper function.

  • Quannetdidong

    year, thank you OkgoDoIt!
    I have another question: How to get tabid when click on ribbon tab.

  • Appreciative User

    Hi, can you show how to generate alerts for the big buttons in the File table and also for the new selected tab. A simply alert like the Open Table functionality would be appreciated.

  • NJ

    Finally, something that’s recent and actually looks like it! :)

  • Abd. Gafur Jamada

    Your tutorial is very helpful, how to hide and show the button

  • iw

    Hi, 

    How do you combine large and small buttons in one section? In a section I want to have large save button and 3 small buttons? Thanks!

  • http://www.OkGoDoIt.com OkGoDoIt

    Hmm, my original version allowed for this, but I suppose I accidentally made that not possible in this one.  I’ll make sure to get that added back in when/if I release an update.

  • Temmmy Raharjo

    Wow! Your work is very amazing! Thx a lot. I’ll try to build a project based on your UI now. :)

  • http://profile.yahoo.com/2I2OCRUARPOAEU5UHLIS5BEP7I Scott

    How fo you not have tab reset on page reload?

  • Jim Ade

    I’ve been looking at this, and I was able to stack small buttons next to a big one by just enclosing the small ones in an extra div like this:

    UpdateAccounts Change the account on many licenses View Tasks View current and recent long-running tasks

  • BEST

    Hey how about loading dynamic div for the ribbon. i was trying but it does not work

  • http://profile.yahoo.com/2I2OCRUARPOAEU5UHLIS5BEP7I Scott


    This demo is USELESS as you do not allow the original tab selected to return on page reload!

  • http://www.OkGoDoIt.com OkGoDoIt

    This is more meant for AJAX web applications, where the page doesn’t reload.  Although if that is a requirement in your case, then it can be fairly easily modified to use a querystring or a cookie to retain state.

    I’m considering implementing some improvements to this soon, so thanks for the suggestion.

blog comments powered by Disqus