All docs
V20.2
21.1 (CTP)
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.

Specify Item Type

A Toolbar item may be plain text or a UI component. Text items should have the text field specified.

jQuery
JavaScript
HTML
$(function() {
    $("#toolbarContainer").dxToolbar({
        items: [{
            text: 'Delete',
            location: 'before'
        }, {
            text: 'Products',
            location: 'center'
        }, {
            text: 'Add',
            location: 'after'
        }]
    });
});
<div id="toolbarContainer"></div>
Angular
HTML
TypeScript
<dx-toolbar>
    <dxi-item text="Delete" location="before"></dxi-item>
    <dxi-item text="Products" location="center"></dxi-item>
    <dxi-item text="Add" location="after"></dxi-item>
</dx-toolbar>
import { DxToolbarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxToolbarModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxToolbar>
        <DxItem text="Delete" location="before"/>
        <DxItem text="Products" location="center"/>
        <DxItem text="Add" location="after"/>
    </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
    }
};
</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';

class App extends React.Component {
    render() {
        return (
            <Toolbar>
                <Item text="Delete" location="before"/>
                <Item text="Products" location="center"/>
                <Item text="Add" location="after"/>
            </Toolbar>
        );
    }
}

export default App;

Items that contain a UI component should have the widget field specified. In addition, you need to declare the options object that will configure the UI component. For a full list of fields this object has, refer to the API reference of the UI component.

jQuery
JavaScript
HTML
$(function() {
    $("#toolbarContainer").dxToolbar({
        items: [{
            widget: 'dxButton',
            options: {
                type: 'back',
                text: 'Back',
                onClick: function() {
                    // ...
                }
            },
            location: 'before'
        }, {
            widget: 'dxSelectBox',
            options: {
                width: 140,
                items: ['All', 'Family', 'Favorites'],
                onItemClick: function(e) {
                    // ...
                }
            },
            location: 'after'
        }]
    });
});
<div id="toolbarContainer"></div>
Angular
HTML
TypeScript
<dx-toolbar>
    <dxi-item
        widget="dxButton"
        [options]="buttonOptions"
        location="before">
    </dxi-item>
    <dxi-item
        widget="dxSelectBox"
        [options]="selectBoxOptions"
        location="after">
    </dxi-item>
</dx-toolbar>
import { DxToolbarModule, DxButtonModule, DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    buttonOptions = {
        type: 'back',
        text: 'Back',
        onClick: function() {
            // ...
        }
    };
    selectBoxOptions = {
        width: 140,
        items: ['All', 'Family', 'Favorites'],
        onItemClick: function(e) {
            // ...
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxToolbarModule,
        DxButtonModule,
        DxSelectBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxToolbar>
        <DxItem
            widget="dxButton"
            :options="buttonOptions"
            location="before"
        />
        <DxItem
            widget="dxSelectBox"
            :options="selectBoxOptions"
            location="after"
        />
    </DxToolbar>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxToolbar,
        DxItem
    },
    data() {
        return {
            buttonOptions: {
                type: 'back',
                text: 'Back',
                onClick: function() {
                    // ...
                }
            },
            selectBoxOptions: {
                width: 140,
                items: ['All', 'Family', 'Favorites'],
                onItemClick: function(e) {
                    // ...
                }
            }
        }
    }
};
</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';
import { SelectBox } from 'devextreme-react/select-box';

const buttonOptions = {
    type: 'back',
    text: 'Back',
    onClick: function() {
        // ...
    } 
}

const selectBoxOptions = {
    width: 140,
    items: ['All', 'Family', 'Favorites'],
    onItemClick: function(e) {
        // ...
    }
}

class App extends React.Component {
    render() {
        return (
            <Toolbar>
                <Item
                    widget="dxButton"
                    options={buttonOptions}
                    location="before"
                />
                <Item
                    widget="dxSelectBox"
                    options={selectBoxOptions}
                    location="after"
                />
            </Toolbar>
        );
    }
}

export default App;
See Also