# ToolBar

The `ToolBar` control is used on forms as a control bar that displays a row of drop-down menus and bitmapped buttons that activate commands. Thus, clicking a toolbar button is equivalent to choosing a menu command. The buttons can be configured to appear and behave as push buttons, drop-down menus, or separators. Typically, a toolbar contains buttons and menus that correspond to items in an application's menu structure, providing quick access to an application's most frequently used functions and commands.

{% hint style="success" %}
The `ToolBarButton` control's `DropDownMenu` property takes an instance of the `ContextMenu` class as a reference. Carefully consider the reference you pass when implementing this sort of button on toolbars in your application, as the property will accept any object that inherits from the `Menu` class.
{% endhint %}

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Button Styles

The `ToolBarButton` control features several styles for customizing its appearance:

* `PushButton`: A standard button.
* `ToggleButton`: A toggle button.
* `Separator`: A line between ToolBar buttons.
* `DropDownButton`: A drop-down button that displays a menu when clicked.

![ToolBar Button Styles](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-c68d4ffc6fcdc8511bda1440109192dc559a1e01%2Fimage.png?alt=media)

## Advanced

### JavaScript Widget <a href="#javascript-widget" id="javascript-widget"></a>

| Item             | Description                                                                                                                                                          |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Class name       | "wisej.web.ToolBar", "wisej.web.toolbar.Separator", "wisej.web.toolbar.SplitButton", and "wisej.web.toolbar.Button"                                                  |
| Theme appearance | "toolbar", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                                                               |
| Child components | "button" represents each toolbar button. "separator" represents the separator items. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model). |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                  |