Navigation and Layout - Ribbon Overview

About the Ribbon

The DevExpress ASP.NET MVC Ribbon extension helps you introduce the look, feel and behavior of a ribbon based UI in your application.

To add a Ribbon to your web application, add the Ribbon extension to the View, and add the required tabs, groups and items.

View code:

@Html.DevExpress().Ribbon(settings => {
    settings.Name = "ribbon";
    var tab = settings.Tabs.Add("Home");
    var tasksGroup = tab.Groups.Add("Tasks");
    tasksGroup.Items.Add(MVCxRibbonItemType.ButtonItem, i => {
        i.Text = "TasksList";
        i.Name = "Tasks List";
        i.Size = RibbonItemSize.Large;
        ((RibbonButtonItem)i).LargeImage.IconID =
    tasksGroup.Items.Add(MVCxRibbonItemType.ButtonItem, i => {
        i.Text = "New";
        i.Name = "NewTask";
        i.Size = RibbonItemSize.Small;
        ((RibbonButtonItem)i).SmallImage.IconID =
    // And other groups with items

Resources to Learn
Key Features
  • Binding to Data
    You can bind a ribbon to a data source so that your ribbon structure is retrieved from an XML file, a SiteMap or a hierarchical list.
  • Responsive Layout
    The Ribbon extension has an adaptive layout, (i.e., the number of items is reduced and groups are collapsed when a ribbon has insufficient space.
  • Templates
    Templates are fully supported. For each element within Ribbon, you can customize the appearance or layout using any HTML content.
  • Rich Client-Side Functionality
    A comprehensive client-side API is available for Ribbon. This functionality, coupled with the ability to handle events on the client side, gives you full control over the Ribbon's behavior on the client side.
Version: v2017 vol 1.7
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.