toolbar.js is a helper library to make it easy for developers to add a toolbar navigation experience to the mobile HTML5 web applications. It is based on the Windows Phone appBar.

Clone the Source Code On GitHub

Clone in Windows

The library was written with no 3rd party library, like jQuery, dependencies. The library does work just fine with jQuery. In fact I will have an additional jQuery file that provides extension methods structured consistently with the way jQuery abstracts standard browser events.

In the initial release support for a top level menu and a sub menu are supported. It uses background images, set in a CSS class, for the top menu icons. If sub menu items are included the menu can be expanded by pressing the elipses (...) located on the right-hand side of the toolbar.

Some things to note:

I have expreienced issues with the default Android browser. I am working on those and hope to have some modifications in place soon. The toolbar currently supports only navigation items. It does not have the capacity at this time to include input controls or custom markup. This is on the todo list.

Documentation

You can always reference the test pages. I have also included a basic set of documentation that will hopefully help you as well. Open the readme.md file included in the source.

Conclusion

Please feel free to use this library. I am integrating it to my web sites and will list the as they come online, so I am dogfooding this library. I consider it early Alpha if you will because I really want to do more testing. If you have any comments or questions drop me a line, Twitter is probably the best way, @ChrisLove. My blog is ProfessionalAspNet.com. I am new to this GitHub thing so I may or may not know proper GitHub etiquette, so please forgive my missteps there.