Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at

This article needs a technical review. How you can help.

A container which typically contains a row of buttons. It is a type of box that defaults to horizontal orientation. It can be collapsed with a grippy when the toolbar is placed inside a toolbox. The toolbar should always have an id attribute.

Note: Gecko 2.0 adds support for external toolbars. These are toolbars that are not children of a toolbox element. You can associate an external toolbar with a toolbox for the purpose of managing your toolbars by setting the toolboxid property on the toolbar.

The chromeclass-toolbar class may be used to create a toolbar where its visibility depends on the toolbar flag when opening the window with the method.

More information is available in the XUL tutorial.

Note: Starting in Gecko 1.9.1, toolbar items are moved from the toolbarpalette and added to the toolbar when a toolbar is first displayed. In earlier versions, a copy of each item was created and placed on the toolbar. This means that the palette now only contains items not already in the toolbar. This introduces a potential compatibility problem for extensions that depend on being able to identify all possible toolbar items by looking in the toolbarpalette.

autohide, currentset, customindex, customizable, defaultset, grippyhidden, grippytooltiptextheight, iconsize, mode, toolbarname
accessibleType, currentSet, firstPermanentChild, lastPermanentChild, toolbarName, toolboxid
Style classes


  <toolbar id="nav-toolbar">
    <toolbarbutton id="nav-users"  accesskey="U" label="Users"/>
    <toolbarbutton id="nav-groups" accesskey="p" label="Groups"/>
    <toolbarbutton id="nav-events" accesskey="E" label="Events" disabled="true"/>


Type: boolean
When set to true, the toolbar will be invisible unless the Alt key is pressed by the user. When set to false, the default, the toolbar is visible. This only has an effect on Windows and needs to be combined with type="menubar" and a menubar element.
Not in SeaMonkey 1.x
Type: comma-separated string
The current set of displayed items on the toolbar. This will be modified when the user customizes the toolbar. The value of this attribute should be a comma-separated list of item IDs from the toolbarpalette or, additionally, any of the following strings: "separator", "spring", "spacer".
Not in SeaMonkey 1.x
Type: integer
This value is the index of the toolbar in the list of the custom toolbars. The value is updated automatically by the toolbar customization dialog.
Not in SeaMonkey 1.x
Type: boolean
Set this attribute to true on toolbars that can be customized. This causes the set of buttons to be persisted across sessions.
Not in SeaMonkey 1.x
Type: comma-separated list of item ids
The default set of displayed items on the toolbar. This should be set to a comma-separated list of item IDs from the toolbarpalette. For example, back-button,forward-button,print-button.
SeaMonkey only
Type: boolean
When set to true, the grippy will be hidden. When set to false, the default, the grippy will be shown.
SeaMonkey only
Type: string
The text to appear on the tooltip for the toolbar's grippy when the toolbar is collapsed. This would be used to label the grippy so that the user knows which toolbar it represents.
Type: string (representing an integer)
The preferred height of the element in pixels. The actual displayed height may be different if the element or its contents have a minimum or maximum height. The CSS height property may also be used.
Type: string
Indicates whether the toolbar should display large icons or small icons; this should be the string "large" or "small", respectively. These can vary from one toolbar to another within a given toolbox, whose iconsize attribute defines the default for all toolbars that don't specify an icon size.
Not in SeaMonkey 1.x
Type: one of the values below
How the toolbarbuttons on the toolbar are displayed.
Show only icons.
Show only text.
Show both.
Not in SeaMonkey 1.x
Type: string
The name of the toolbar, which is listed on the Show/Hide toolbars menu.


Type: integer
A value indicating the type of accessibility object for the element.
Not in SeaMonkey 1.x
Type: comma-separated list of strings
Holds a comma-separated list of the IDs of the items currently on the toolbar. For spacers, separators, and flexible spacers the following strings are used instead of IDs: "spacer", "separator", "spring". An empty toolbar has a currentSet value of "__empty".
You may change the current set of items by setting this property. Be careful, as setting this property doesn't automatically update the currentset attribute.


Not in SeaMonkey 1.x
Type: element
The first permanent child of the toolbar. A permanent child is one that is not customizable and remains on the toolbar. Items that are placed directly inside the toolbar without being in the toolbarpalette are permanent.
Not in SeaMonkey 1.x
Type: element
The last permanent child of the toolbar. A permanent child is one that is not customizable and remains on the toolbar. Items that are placed directly inside the toolbar without being in the toolbarpalette are permanent.
Not in SeaMonkey 1.x
Type: string
The name of the toolbar.
Type: string
The ID of the toolbox this toolbar is a member of. This will either be the toolbox's parent (if it's in a toolbox), or, if the toolbar is an external toolbar (that is, one not contained in a toolbox), the ID of the toolbox it should be considered to be part of. This makes it possible to have toolbars that are not contained within toolboxes, such as the add-on bar.


insertItem( id, beforeNode, wrapper, beforePermanent )
Not in SeaMonkey 1.x
Return type: element
Add an item with the given id to the toolbar. The new item is added just before the item given by the second argument. If the second argument is null, but the beforePermanent argument is true, the item is added to the beginning of the toolbar before the first permanent item. Otherwise, if the beforePermanent argument is false, the new item is added to the end of the toolbar. The third argument can be used to wrap the new item in another element. Usually, the last argument will be null as it is mainly for the use of the customize dialog.

The id should match an element in the toolbar's toolbarpalette. Some special ids may also be used to create special spacing items:

  • separator: A separator, which is drawn as a vertical bar.
  • spacer: A non-flexible space.
  • spring: A flexible space.

The method returns the DOM element for the created item.


Inherited Methods
addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData

Style classes

When this class is used, the toolbar will be hidden when a window is opened by setting the toolbar option to no in the method. Otherwise, this option will be ignored for this toolbar and it will always be visible.

toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox

Document Tags and Contributors

 Last updated by: VodyanoyZmey,