All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Overview

The Toolbar is a widget containing items that usually manage screen content. Those items can be plain text or widgets.

View Demo

The following code adds a simple Toolbar to your page. Three items are plain text and one is a Button widget.

jQuery
HTML
JavaScript
<div id="toolbarContainer"></div>
$(function() {
    $("#toolbarContainer").dxToolbar({
        items: [{
            widget: 'dxButton',
            options: {
                type: 'back',
                text: 'Back'
            },
            location: 'before'
        }, {
            text: 'Add',
            locateInMenu: 'always'
        }, {
            text: 'Change',
            locateInMenu: 'always'
        }, {
            text: 'Products',
            location: 'center'
        }]
    });
});
Angular
HTML
TypeScript
<dx-toolbar>
    <dxi-item
        widget="dxButton"
        location="before"
        [options]="{
            type: 'back',
            text: 'Back'
        }">
    </dxi-item>
    <dxi-item
        text="Add"
        locateInMenu="always">
    </dxi-item>
    <dxi-item
        text="Change"
        locateInMenu="always">
    </dxi-item>
    <dxi-item
        text="Products"
        location="center">
    </dxi-item>
</dx-toolbar>
import { DxToolbarModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxToolbarModule,
        DxButtonModule
    ],
    // ...
})

Note that all data source objects in the code above follow the Default Item Template pattern. This provides a default appearance for toolbar items, which can be customized later.

See Also