Use the Mobile View of the ToolBar

Updated on Dec 10, 2025

Environment

Product	Progress® Kendo UI® ToolBar for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I use the mobile view of a Kendo UI for jQuery ToolBar?

Solution

To enable the mobile view of the ToolBar widget:

1. Add the mobile styles.
2. To configure the position of the tools that will be rendered left or right, use the align option.
3. Initialize kendo.mobile.Application().

The example below demonstrates how to use the mobile view of the Toolbar. It is recommended that you open it in Dojo.

html

<div id="toolbar"></div>
<script>
  $("#toolbar").kendoToolBar({
    items: [
          { type: "button", text: "Button 1", align: "left" },
          { type: "button", text: "Button 2", align: "left" },
          { type: "button", text: "Button 3" },
          { type: "button", text: "Button 4" }
      ]
  });

  var app = new kendo.mobile.Application(document.body);
</script>

See Also

• ToolBar JavaScript API Reference
• Close ToolBar Popup Manually
• Develop and Register Custom ToolBar Tools