Check documentation for the latest version of dhtmlxSuite Object Constructor DHTMLX Docs

Object Constructor

var myRibbon = new dhtmlXRibbon(data);

The Ribbon component can be initialized in two ways:

  • By placing directly on the page
    var myRibbon = new dhtmlXRibbon(container, [configObj]);
  • By attaching to the layout (either to the whole layout or to a singular cell)
    var myRibbon = layout.attachRibbon([configObj]);


  • container - an HTML container where the ribbon object will reside
  • configObj - a configuration object that specifies the structure of the ribbon

Layout, Window, Accordion, Tabbar can create ribbon inside their cells by using the method attachRibbon():

// attach to Layout
// attach to Window
// attach to Accordion
// attach to Tabbar

Ribbon can also be initialized by object notation:

myRibbon = new dhtmlXRibbon({
    icons_path : "../../../samples_common/ribbon/",
    arrows_mode: "auto",
        alert("Ribbon item was clicked");  

Specifying Ribbon Items

Ribbon's items can be defined through "tabs" collection with "items" collections inside:

var myRibbon = new dhtmlXRibbon({
    parent : "rb",
    icons_path : "../../../samples_common/ribbon/",
    arrows_mode: "auto",
    tabs: [
        { //1st tab
            id: "tab_id",
            text: "Ribbon tab 1",
            items: []
        { //2nd tab
            id: "tab_id2",
            text: "Ribbon_tab 2",
            items: [
                {type:"block", text:"Group 1", text_pos: "bottom", mode:"cols",
                list:[                                  //1st block
                    {type:"button", text:"New"},        //1st row, 1st item
                    {type:"button", text:"Open"},       //1st row, 2nd item
                    {type:"button", text:"Save"},       //1st row, 3rd item
                    {type:"newLevel"},                  //moves down into a new row
                    {type:"button", text:"Edit"},       //2nd row, 1st item
                {type:"block", text:"Group 2", text_pos:"bottom", 
                    //2nd block
Back to top