We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


The toolbar provides an interface for selecting a command from a collection of commands. It has a rich set of features that includes orientation, responsive modes (scrollable and popup), templating, alignment of commands based on priority, and more.


Item-based rendering

A toolbar can be rendered based on a JSON array collection of properties such as header and content. Data binding can be achieved by forming an array collection of items.

Template rendering

A toolbar can also be rendered with the given HTML elements. HTML markup can be formed based on templating elements using the template engine.


The toolbar control adapts to the available space in two display modes: scrollable and popup.

JavaScript Toolbar Control with responsive mode by scrollable


Scrollable display mode displays toolbar commands in a single line with horizontal scrolling enabled, when the items overflow to the available space. You can swipe over the toolbar commands to scroll.

The popup menu is another type of overflow mode in which the toolbar container holds the items that can be placed within the available space. The items that do not fit the viewing area are moved to the overflow popup container. You can view the overflow tab headers by clicking the popup icon.

Priority of commands

You can prioritize the commands to be displayed in the popup or toolbar when minimum space is available to view them.

Pinning items in popup

You can also set specific items to be displayed always in the popup regardless of the available space on the toolbar.

Alignment of commands

Commands can be aligned to be positioned at the left, right, or center of the toolbar.


Icons support

You can add icons with or without text to the buttons according to your preference. The icons’ position can be changed to the left or right.

Text mode options

You can add button text when necessary, which means you can decide to show text in popup alone, toolbar alone, or in both.

Loading other components

The toolbar can be customized with other controls like date picker, dropdown list and numeric textbox, using the item templating option.


To describe the actions of the command, a tooltip can be added. By default, HTML is supported, but the Essential JS2 tooltip control can also be used.

Command customization

Commands used in the toolbar can be customized with styles such as CSS classes and HTML attributes such as ID, class, and styles.

JavaScript Toolbar Control with customized commands


  • Fully supports WAI-ARIA accessibility that helps the toolbar be accessible by on-screen readers and assistive devices. 
  • Follows WAI-ARIA Best Practices for implementing keyboard interaction. 
  • Designed the UI element visuals such as foreground color, background color, line spacing, text and images based on WCG 2.0 standard.

Developer-friendly API

Developers can control the appearance and behaviors of the toolbar using a rich set of APIs.


Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon