All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Overview

The Toolbar is a UI component containing items that usually manage screen content. Those items can be plain text or UI components.

View Demo

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

jQuery
JavaScript
HTML
$(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'
        }]
    });
});
<div id="toolbarContainer"></div>
Angular
HTML
TypeScript
<dx-toolbar>
    <dxi-item
        widget="dxButton"
        location="before"
        [options]="buttonOptions">
    </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 {
    buttonOptions = {
        type: 'back',
        text: 'Back'
    };
}
@NgModule({
    imports: [
        // ...
        DxToolbarModule,
        DxButtonModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxToolbar>
        <DxItem
            widget="dxButton"
            location="before"
            :options="buttonOptions"
        />
        <DxItem
            text="Add"
            locate-in-menu="always"
        />
        <DxItem
            text="Change"
            locate-in-menu="always"
        />
        <DxItem
            text="Products"
            location="center"
        />
    </DxToolbar>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxToolbar, { DxItem } from 'devextreme-vue/toolbar';

export default {
    components: {
        DxToolbar,
        DxItem
    },
    data() {
        return {
            buttonOptions: {
                type: 'back',
                text: 'Back'
            }
        }
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Toolbar, Item } from 'devextreme-react/toolbar';

const buttonOptions = {
    type: 'back',
    text: 'Back'
};

class App extends React.Component {
    render() {
        return (
            <Toolbar>
                <Item
                    widget="dxButton"
                    location="before"
                    options={buttonOptions}
                />
                <Item
                    text="Add"
                    locateInMenu="always"
                />
                <Item
                    text="Change"
                    locateInMenu="always"
                />
                <Item
                    text="Products"
                    location="center"
                />
            </Toolbar>
        );
    }
}

export default App;

Note that field names in these data source items are conventional. This provides a default tile appearance, which can be customized later.

See Also