Adding a custom tab to the SharePoint Rbbon

Back to Walkthrough

This topic describes how to add a custom tab to the SharePoint Rbbon.
All you need to add custom tab to the server ribbon is instance of System.Web.UI.Page. In other words you can add your custom tab to the ribbon by using
  • UserControl (registering it as delegate control);
  • Any server control on a page (WebPart, Control, ...).

Defining the tab

// Define the tab
var demoTab = new RibbonTab("DemoTab", "Demo Tab");

Defining the group

Ribbon tab has to have at least one child group:
var demoGroup = new RibbonGroup("DemoGroup", "Demo Group");
demoTab.Groups = new RibbonGroup[]

Defining group' sections

Layouts of element in group set by child sections. Section can be empty (using as divider), one-row, two-row and three-row. Type property of section is responsible for this behavior.
// _demoButtons() returns array of RibbonButton elements

// Define section (one row)
var demoSectionOneRow = new RibbonGroupSection
        DisplayMode = RibbonDisplayMode.Image32AndCaption,
        Type = RibbonSectionType.OneRow,
        Controls = _demoButtons()
// Define section (two rows)
var demoSectionTwoRows = new RibbonGroupSection
    DisplayMode = RibbonDisplayMode.Image16AndCaption,
    Type = RibbonSectionType.TwoRows,
    Controls = _demoButtons()
// Define section (three rows)
var demoSectionThreeRows = new RibbonGroupSection
    DisplayMode = RibbonDisplayMode.Image16Only,
    Type = RibbonSectionType.ThreeRows,
    Controls = _demoButtons()

// Use sections in the group
demoGroup.Sections = new[]
        RibbonGroupSection.Divider, // Divider
        RibbonGroupSection.Divider, // Divider

Adding the tab to the ribbon

RibbonManager.Current.AddTabToPage(demoTab, Page, true);


See also


Adding a custom contextual group to the SharePoint Rbbon



Last edited Aug 25, 2013 at 1:35 PM by VitalyZhukov, version 3


No comments yet.