Syncfusion jQuery no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 .

Try Essential JS 2

Feature-rich control to manage the tools with multiple tabs and groups in an elegant way.
Adaptive layout for mobile layouts with responsive design.
Built-in features like backstage menu, gallery option, custom tooltip and more.

Trusted by the world’s leading companies

ASP.NET ribbon

VIEW DEMOS

Overview

The ribbon control provides support for application menus, buttons, split buttons, toggle buttons, drop-down, custom control, contextual tabs, expanding/collapsing the ribbon, and group expanders. We can group elements and separate elements using group separators.

Ribbon

Resizing

Ribbon control supports all levels of automatic resizing with group controls. The group controls will be replaced by the custom drop-down button and we can view the group controls by expanding it.

Resizing

Gallery

The gallery is used to save space on the ribbon by arranging button controls in it. Most significantly, it provides a means to present user options graphically on the ribbon.

Gallery Gallery Expand

Users can customize the tooltip with the following: ribbon button, split button, drop-down, toggle button, and gallery controls with title, descriptions, and images to represent the control graphically.

Custom Tooltip in Ribbon

AngularJS Support

Ribbon allows us to use HTML as our template language and extend the syntax of HTML to express all the ribbon features like application tabs, contextual tabs, gallery, resizing, custom tooltip, etc. Ribbon also supports button, split button, drop-down list, menu, and toggle button controls in AngularJS.

Backstage

The backstage page in ribbon control is a rich, customizable user interface like Office 2013 backstage. The left side of the backstage page contains tab, button items, and close button; the right side of the backstage page contains the corresponding user control items.

Backstage

Responsive Rendering

The ribbon control can adapt to a given screen size. Ribbon tabs, groups, and content automatically change in a mobile view.

Adaptive Ribbon tabs Mobile view in Ribbon

On-Demand Rendering

Loading content on demand improves the initial rendering time of the ribbon by rendering tab and backstage content when tabs and backstage items are clicked. This feature also supports initial collapsible rendering of the ribbon, which results in ribbon tabs rendering without any content initially.