This repository has been archived by the owner. It is now read-only.
A lightweight class for adding a toolbar or menu bar to an HTA.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


This HTA Toolbar class allows you to easily add a menu and/or status bar into your HTML applications. The menu bar supports multiple menus, menu buttons, separators and disabled items. The status bar supports icons, expiry times and temporary statuses.

This guide is also available in the default toolbar.hta file.

Starting Off

To use the class, you need a copy of the toolbar.css and toolbar.js in a folder with a new HTA file. The HTA should be structured like this.

		<hta:application id="**ID**" applicationname="**name**" border="thick" borderstyle="static" caption="**title**" contextmenu="no" icon="**icon**" scroll="no" singleinstance="yes">
		<script type="text/javascript" src="toolbar.js"></script>
		<link type="text/css" rel="stylesheet" href="toolbar.css" />
	<body onload="toolbar.init(**width**, **height**[, **menus**[, **status** [, **error**]]]);">
		<div id="content">**content**</div>

The InitToolbar() function is how you define toolbars. It takes up to five parameters: width, height, menus, status and error. The width and height parameters allow you to set the window size before you define menus. The menus parameter takes a menu array (or false if you don't want a menu bar), and the status parameter takes a string and image array (or false if you don't want a status bar). By setting error to 1 (or any truthy value), any errors that occur whilst running core toolbar functions will be displayed in alert dialogs (useful for debugging errors).

Menu Bars

You should define your menu as a nested array in the head section of the page. The basic layout is as follows.

var Menus =
		"**menu 1 ID**",
		"**menu 1 label**",
			["**menu 1, item 1 Label**", "**menu 1, item 1 script**"],
			["**menu 1, disabled item 2 Label**"],
			["**menu 1, item 3 Label**", "**menu 1, item 3 script**"]
		"**button 2 ID**",
		"**button 2 label**",
		"**button 2 script**"
		"**menu 3 ID**",
		"**menu 3 label**",
			["**menu 3, item 1 label**", "**menu 3, item 1 script**"]

Each menu is an array within an array. A sub-menu array is divided into three - an ID, a label, and a menu sub-array (or script if you want a menu button instead. This sub array then takes additional arrays for each menu item, which has a label and a script (a separator can be added by passing "-" instead of a sub-array). To disable a menu item, omit the script string (just use a label within a sub-array).

When calling the InitToolbar() function, pass the Menus array (or whatever you called it) as the third parameter.

Status Bars

You should define your menu as either a string or an array (depending on if you want an icon or not) in the head section of the page.

var Status = "This is a standard status message.";

var Status = ["This status message has an alert icon.", "alert.png"];

The icon should be relative to the HTA directory, and should be 16px by 16px (larger images will be resized). When calling the InitToolbar() function, pass the Status string or array as the fourth parameter.