dhtmlxToolbar is a completely customizable free JavaScript toolbar that allows to build a user friendly interface for a web application.



This cross-browser JavaScript navigation component enables to create an attractive vertical or horizontal DHTML toolbar within minutes. dhtmlxToolbar is flexible, powerful, lightweight and easy to use.
You can freely define its visual appearance and complexity by simply changing parameters (color, font, borders, padding, position, background images and more). Dynamical loading from XML gives an opportunity to change this JavaScript toolbar completely without reloading.
dhtmlxToolbar supports several buttons types (image pushButton, image/text pushButton, toggleButton, select box). It works perfectly in all main Web-browsers (IE, Mozilla, FireFox, MacOS X Safari, Opera).
Having great feature set, wide variety of options, flexibility, cross-browser compatibility, powerful Javascript API makes this component really useful for creating superior DHTML toolbar.

Supported Browsers:

  • IE 5.x and above
  • Mac OS X Safari
  • Mozilla 1.4 and above
  • FireFox 0.9 and above
  • Opera (Xml support depends on browser version)
  • Toolbar Features:

  • Multibrowser/Multiplatform support
  • Full controll with JavaScript API
  • Dynamic loading
  • XML support
  • horisontal and vertical layout
  • different types of buttons
  • customizable design
  • high stability
  • Macromedia ColdFusion support
  • Licensing

  • Free License
  • Download Toolbar:

  • Full package
  • Documentation only
  • Examples:

  • Initialize object
  • Add/Delete items
  • Customisable layout
  • Vertical layout
  • Skinable design
  • Button properties
  • Two state buttons
  • Documentation:

  • API Functions and Documentation

  • Download Toolbar source code

    Code Sample

    <link rel="STYLESHEET" type="text/css" href="css/dhtmlXTree.css"> <script language="JavaScript" src="js/dhtmlXProtobar.js"></script> <script language="JavaScript" src="js/dhtmlXToolbar.js"></script> <script language="JavaScript" src="js/dhtmlXCommon.js"></script> <script> var tree1 = null; function onButtonClick(itemId,itemValue) { //alert("Button "+itemId+" was pressed"); }; function doOnLoad(){ aToolBar=new dhtmlXToolbarObject("toolbar_zone",'100%',20,""); aToolBar.setOnClickHandler(onButtonClick); aToolBar.loadXML("_toolbar.xml") aToolBar.showBar(); } </script> <body onload="doOnLoad()"> <div id="toolbar_zone" style="width:600;border :1px solid Silver;"> </div>

    See also our Java toolbar applet - jToolbar.