Array of the item objects.
Array, default = []
The .items property defines all toolbar items (buttons, drop down menus, etc.) You can define them during object creation or at run-time. $('#toolbar').w2toolbar({ name : 'toolbar', right : 'text on the right', items : [ { type: 'check', id: 'item1', text: 'Check', img: 'icon-page', checked: true }, { type: 'radio', id: 'item3', group: '1', text: 'Radio 1', img: 'icon-add' }, { type: 'radio', id: 'item4', group: '1', text: 'Radio 2', img: 'icon-add' } ] }); If you change this property during run-time, do not forget to call the .refresh() method to refresh it on the screen. If you need to add/remove items during run-time, you can use .add(), .insert(), .remove() methods.
An item object has the following structure: item: { id : null, // id of the item type : 'button',// type of the item (button, check, radio, drop, menu, break, spacer, html) text : '', // caption of the item, can be string or function html : '', // html text for the item (only if type = html), can be string or function tooltip : null, // tooltip for the item (see w2toolbar.tooltip), can be string or function count : null, // count badge hidden : false, // indicates if item is hidden disabled : false, // indicates if item is disabled checked : false, // indicates if item is checked img : '', // css class of the image for the item icon : '', // css class of the icon font for the item route : null, // route to follow, can have dynamic parts as /item/:id/details (see routeData) arrow : true, // down arrow for drop/menu types style : null, // extra css style for caption color : null, // color value - used in color pickers transparent: null, // transparent flag t/f - used in color pickers group : null, // group name for the item, used for radio buttons, can be integer or string items : null, // for type=menu it is an array of items in the menu selected : null, // id of array of ids of the selected item(s) for menu-check and menu-radio overlay : {}, // for drop down menus additional params for overlay, see overlay onClick : null, // click event handler for this item only onRefresh: null // refresh event handler for this item only } There are 12 types of toolbar items

button | regular button
check | check button (2 states: checked and unchecked). See .checked property.
radio | radio button, similar to check button but other buttons in the group will be unchecked. See .checked and .group property
menu | drop down menu. The .items property will be treated as menu items. This property either an array of strings or array of objects. If it is array of string, then each element of the array is a menu item. If it is array of object, then each element of the array is an object of the following type: item: { id : '', // id of the menu item text : '', // text of the menu item icon : '', // css class for icon font img : '', // css class for an image disabled : false, // indicates if menu item is disabled checked : false // indicates if menu item is checked (for menu-check or menu-radio) } There are several default icons in w2ui.css file you can use or you can create your own css file with icons. Majority of default icons are used in w2grid. Default icons are: icon-folder, icon-page, icon-reload, icon-columns, icon-search, icon-add, icon-delete, icon-save, icon-edit, icon-bullet-black
menu-check | drop down menu of check boxes. It is similar to the menu item, but displays a checkbox next to the menu item. You can check what checkboxes are selected if you read .selected property (toolbar item not menu item). In case of menu-check it is an array of ids of the selected items.
menu-radio | drop down menu of radio buttons. It is similar to the menu item, but displays a radio button next to the menu item. You can check what radio button is selected if you read .selected property (toolbar item not menu item). In case of menu-radio it is a single value that is the id of the selected item
drop | simple drop down, whatever in .html property will be display in the drop down
html | html item, this html will be displayed instead of the toolbar item
color | color picker drop down, see .color and .transparent properties.
text-color | color picker drop down for text, see .color, .transparent properties.
break | vertical separator
spacer | horizontal spacer, will push all following buttons to the right hand side