Ribbon Backstage

3 Feb 202624 minutes to read

The Ribbon control includes a Backstage view, which serves as a comprehensive replacement for the traditional file menu. It is designed to display application-level information and settings, such as user details, document properties, or options pages. The Backstage view is enabled by configuring the backStageMenu property.

When active, backstage options are displayed in a list on the left, and the content for the selected option appears on the right.

Adding backstage items

Define and add items to the Backstage view by populating the items property. To display the Backstage, set the visible property to true. By default, the Backstage view is hidden.

import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonBackstage);

let tabs: RibbonTabModel[] = [
  {
    header: "Home",
    groups: [
      {
        header: "Clipboard",
        collections: [
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Paste",
                  iconCss: "e-icons e-paste",
                }
              },
            ],
          },
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Cut",
                  iconCss: "e-icons e-cut",
                }
              },
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Copy",
                  iconCss: "e-icons e-copy",
                }
              },
            ],
          }
        ]
      }
    ]
  }
];

let ribbon: Ribbon = new Ribbon({
    tabs: tabs,
    backStageMenu: {
      items: [
        { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' },
        { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: '#newContent' },
        { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: '#openContent' }
      ],
      visible: true,
      backButton: { text: 'Close' }
    }
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
    <title>Essential JS 2 - Ribbon</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-ribbon/styles/tailwind3.css" rel="stylesheet" />
    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .e-ribbon-backstage-content{
            width: 550px;
            height: 350px;
        }

        .section-title {
            font-size: 22px;
        }

        .new-docs {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .category_container {
            width: 150px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
        }

        .doc_category_image {
            width: 80px;
            height: 100px;
            background-color: #fff;
            border: 1px solid rgb(125, 124, 124);
            text-align: center;
            overflow: hidden;
            margin: 0px auto 10px;
        }

        .doc_category_text {
            font-size: 16px;
        }

        .section-content {
            padding: 12px 0px;
            cursor: pointer;
        }

        .doc_icon {
            font-size: 16px;
            padding: 0px 10px;
        }

        .category_container:hover, .section-content:hover {
            background-color: #dfdfdf;
            border-radius: 5px;
            transition: all 0.3s;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="ribbon"></div>
    </div>
</body>
<script type="text/x-jsrender" id="homeContent">
    <div id='home-wrapper' style="padding: 20px;">
        <div id='new-section' class='new-wrapper'>
            <div class='section-title'> New </div>
            <div class='category_container'>
                <div class='doc_category_image'></div> 
                <span class='doc_category_text'> New document </span>
            </div>
        </div>
        <div id='block-wrapper'><div class='section-title'> Recent </div>
            <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                <table>
                    <tbody>
                        <tr>
                            <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                            <td> 
                                <span style="display: block; font-size: 14px"> Ribbon.docx </span>
                                <span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</script>
<script type="text/x-jsrender" id="newContent">
    <div id='new-content' style="padding: 20px;">
        <div id='new-section' class='new-wrapper'>
            <div class='section-title'> New </div>
            <div class='category_container'>
                <div class='doc_category_image'></div> 
                <span class='doc_category_text'> New document </span>
            </div>
        </div>
    </div>
</script>
<script type="text/x-jsrender" id="openContent">
    <div style="padding: 20px;">
        <div class="section-content" style="padding: 12px 0px; cursor: pointer">
            <table>
                <tbody>
                    <tr>
                        <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                        <td> 
                            <span style="display: block; font-size: 14px"> Open in Desktop App </span>
                            <span style="font-size: 12px"> Use the full functionality of Ribbon </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="section-content" style="padding: 12px 0px cursor: pointer">
            <table>
                <tbody>
                    <tr>
                        <td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
                        <td> 
                            <span style="display: block; font-size: 14px"> Protect Document </span>
                            <span style="font-size: 12px">To prevent accidental changes,
                                this document has been set to open as view-only.</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</script>
</html>

To designate an item as a footer menu item, set its isFooter property in the items collection to true.

import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonBackstage);

let tabs: RibbonTabModel[] = [
  {
    header: "Home",
    groups: [
      {
        header: "Clipboard",
        collections: [
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Paste",
                  iconCss: "e-icons e-paste",
                }
              },
            ],
          },
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Cut",
                  iconCss: "e-icons e-cut",
                }
              },
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Copy",
                  iconCss: "e-icons e-copy",
                }
              },
            ],
          }
        ]
      }
    ]
  }
];

let ribbon: Ribbon = new Ribbon({
    tabs: tabs,
    backStageMenu: {
      items: [
        { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' },
        { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: '#newContent' },
        { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: '#openContent' },
        { separator: true, isFooter: true },
        { id: 'account', text: 'Account', isFooter: true, content: '#accountContent' }
      ],
      visible: true,
      backButton: { text: 'Close' }
    }
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
    <title>Essential JS 2 - Ribbon</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-ribbon/styles/tailwind3.css" rel="stylesheet" />
    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .e-ribbon-backstage-content{
            width: 550px;
            height: 350px;
        }

        .section-title {
            font-size: 22px;
        }

        .new-docs {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .category_container {
            width: 150px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
        }

        .doc_category_image {
            width: 80px;
            height: 100px;
            background-color: #fff;
            border: 1px solid rgb(125, 124, 124);
            text-align: center;
            overflow: hidden;
            margin: 0px auto 10px;
        }

        .doc_category_text {
            font-size: 16px;
        }

        .section-content {
            padding: 12px 0px;
            cursor: pointer;
        }

        .doc_icon {
            font-size: 16px;
            padding: 0px 10px;
        }

        .category_container:hover, .section-content:hover {
            background-color: #dfdfdf;
            border-radius: 5px;
            transition: all 0.3s;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="ribbon"></div>
    </div>
</body>
<script type="text/x-jsrender" id="homeContent">
    <div id='home-wrapper' style="padding: 20px;">
        <div id='new-section' class='new-wrapper'>
            <div class='section-title'> New </div>
            <div class='category_container'>
                <div class='doc_category_image'></div> 
                <span class='doc_category_text'> New document </span>
            </div>
        </div>
        <div id='block-wrapper'><div class='section-title'> Recent </div>
            <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                <table>
                    <tbody>
                        <tr>
                            <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                            <td> 
                                <span style="display: block; font-size: 14px"> Ribbon.docx </span>
                                <span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</script>
<script type="text/x-jsrender" id="newContent">
    <div id='new-content' style="padding: 20px;">
        <div id='new-section' class='new-wrapper'>
            <div class='section-title'> New </div>
            <div class='category_container'>
                <div class='doc_category_image'></div> 
                <span class='doc_category_text'> New document </span>
            </div>
        </div>
    </div>
</script>
<script type="text/x-jsrender" id="openContent">
    <div style="padding: 20px;">
        <div class="section-content" style="padding: 12px 0px; cursor: pointer">
            <table>
                <tbody>
                    <tr>
                        <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                        <td> 
                            <span style="display: block; font-size: 14px"> Open in Desktop App </span>
                            <span style="font-size: 12px"> Use the full functionality of Ribbon </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="section-content" style="padding: 12px 0px cursor: pointer">
            <table>
                <tbody>
                    <tr>
                        <td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
                        <td> 
                            <span style="display: block; font-size: 14px"> Protect Document </span>
                            <span style="font-size: 12px">To prevent accidental changes,
                                this document has been set to open as view-only.</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</script>
<script type="text/x-jsrender" id="accountContent">
    <div style="padding: 20px;">
        <div class="section-content" style="padding: 12px 0px; cursor: pointer">
            <table>
                <tbody>
                    <tr>
                        <td> <span class="doc_icon e-icons e-people"></span> </td>
                        <td> 
                            <span style="display: block; font-size: 14px">Account type</span>
                            <span style="font-size: 12px">Administrator</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="section-content" style="padding: 12px 0px cursor: pointer">
            <table>
                <tbody>
                    <tr>
                        <td> <span class="doc_icon e-icons e-password"></span> </td>
                        <td> 
                            <span style="display: block; font-size: 14px">Password protected</span>
                            <span style="font-size: 12px">Yes</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</script>
</html>

Adding separator

Separators are horizontal lines used to visually group related items within the Backstage view. To add a separator, set the separator property of a Backstage item to true.

import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonBackstage);

let tabs: RibbonTabModel[] = [
  {
    header: "Home",
    groups: [
      {
        header: "Clipboard",
        collections: [
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Paste",
                  iconCss: "e-icons e-paste",
                }
              },
            ],
          },
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Cut",
                  iconCss: "e-icons e-cut",
                }
              },
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Copy",
                  iconCss: "e-icons e-copy",
                }
              },
            ],
          }
        ]
      }
    ]
  }
];

let ribbon: Ribbon = new Ribbon({
    tabs: tabs,
    backStageMenu: {
      items: [
        { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' },
        { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: '#newContent' },
        { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: '#openContent' },
        { separator: true },
        { text: 'Print', content: '#printContent' }
      ],
      visible: true,
      backButton: { text: 'Close' }
    }
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
    <title>Essential JS 2 - Ribbon</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-ribbon/styles/tailwind3.css" rel="stylesheet" />
    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .e-ribbon-backstage-content{
            width: 350px;
            height: 530px;
        }

        .section-title {
            font-size: 22px;
        }

        .new-docs {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .category_container {
            width: 150px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
        }

        .doc_category_image {
            width: 80px;
            height: 100px;
            background-color: #fff;
            border: 1px solid rgb(125, 124, 124);
            text-align: center;
            overflow: hidden;
            margin: 0px auto 10px;
        }

        .doc_category_text {
            font-size: 16px;
        }

        .section-content {
            padding: 12px 0px;
            cursor: pointer;
        }

        .doc_icon {
            font-size: 16px;
            padding: 0px 10px;
        }

        .category_container:hover, .section-content:hover {
            background-color: #dfdfdf;
            border-radius: 5px;
            transition: all 0.3s;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="ribbon"></div>
    </div>
</body>
<script type="text/x-jsrender" id="homeContent">
    <div id='home-wrapper' style="padding: 20px;">
        <div id='new-section' class='new-wrapper'>
            <div class='section-title'> New </div>
            <div class='category_container'>
                <div class='doc_category_image'></div> 
                <span class='doc_category_text'> New document </span>
            </div>
        </div>
        <div id='block-wrapper'><div class='section-title'> Recent </div>
            <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                <table>
                    <tbody>
                        <tr>
                            <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                            <td> 
                                <span style="display: block; font-size: 14px"> Ribbon.docx </span>
                                <span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</script>
<script type="text/x-jsrender" id="newContent">
    <div id='new-content' style="padding: 20px;">
        <div id='new-section' class='new-wrapper'>
            <div class='section-title'> New </div>
            <div class='category_container'>
                <div class='doc_category_image'></div> 
                <span class='doc_category_text'> New document </span>
            </div>
        </div>
    </div>
</script>
<script type="text/x-jsrender" id="openContent">
    <div style="padding: 20px;">
        <div class="section-content" style="padding: 12px 0px; cursor: pointer">
            <table>
                <tbody>
                    <tr>
                        <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                        <td> 
                            <span style="display: block; font-size: 14px"> Open in Desktop App </span>
                            <span style="font-size: 12px"> Use the full functionality of Ribbon </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="section-content" style="padding: 12px 0px cursor: pointer">
            <table>
                <tbody>
                    <tr>
                        <td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
                        <td> 
                            <span style="display: block; font-size: 14px"> Protect Document </span>
                            <span style="font-size: 12px">To prevent accidental changes,
                                this document has been set to open as view-only.</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</script>
<script type="text/x-jsrender" id="printContent">
    <div style="min-width: 300px; padding: 20px;">
        <h2>Print this document</h2>
        <button id="togglebtn" class="e-control e-btn e-lib e-flat e-primary">
        <span class="e-btn-icon e-btn-sb-icons e-icons e-print e-icon-left">
        </span>Print</button>
    </div>
</script>
</html>

Back button customization

Customize the text and icon of the Backstage view’s close button using the backButton property. The button’s text is set with the text property and its icon with the iconCss property. The back button is displayed by setting its visible property to true.

import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonBackstage);

let tabs: RibbonTabModel[] = [
  {
    header: "Home",
    groups: [
      {
        header: "Clipboard",
        collections: [
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Paste",
                  iconCss: "e-icons e-paste",
                }
              },
            ],
          },
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Cut",
                  iconCss: "e-icons e-cut",
                }
              },
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Copy",
                  iconCss: "e-icons e-copy",
                }
              },
            ],
          }
        ]
      }
    ]
  }
];

let ribbon: Ribbon = new Ribbon({
    tabs: tabs,
    backStageMenu: {
      items: [
        { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' }
      ],
      visible: true,
      backButton: { text: 'Close' }
    }
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
    <title>Essential JS 2 - Ribbon</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-ribbon/styles/tailwind3.css" rel="stylesheet" />
    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script type="text/x-jsrender" id="homeContent">
        <div id='home-wrapper' style="padding: 20px;">
            <div id='new-section' class='new-wrapper'>
                <div class='section-title'> New </div>
                <div class='category_container'>
                    <div class='doc_category_image'></div> 
                    <span class='doc_category_text'> New document </span>
                </div>
            </div>
            <div id='block-wrapper'><div class='section-title'> Recent </div>
                <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                    <table>
                        <tbody>
                            <tr>
                                <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                                <td> 
                                    <span style="display: block; font-size: 14px"> Ribbon.docx </span>
                                    <span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </script>
    <script type="text/x-jsrender" id="newContent">
        <div id='new-content' style="padding: 20px;">
            <div id='new-section' class='new-wrapper'>
                <div class='section-title'> New </div>
                <div class='category_container'>
                    <div class='doc_category_image'></div> 
                    <span class='doc_category_text'> New document </span>
                </div>
            </div>
        </div>
    </script>
    <script type="text/x-jsrender" id="openContent">
        <div style="padding: 20px;">
            <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                <table>
                    <tbody>
                        <tr>
                            <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                            <td> 
                                <span style="display: block; font-size: 14px"> Open in Desktop App </span>
                                <span style="font-size: 12px"> Use the full functionality of Ribbon </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="section-content" style="padding: 12px 0px cursor: pointer">
                <table>
                    <tbody>
                        <tr>
                            <td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
                            <td> 
                                <span style="display: block; font-size: 14px"> Protect Document </span>
                                <span style="font-size: 12px">To prevent accidental changes,
                                    this document has been set to open as view-only.</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </script>
    <style>
        .e-ribbon-backstage-content{
            width: 550px;
            height: 350px;
        }

        .section-title {
            font-size: 22px;
        }

        .new-docs {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .category_container {
            width: 150px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
        }

        .doc_category_image {
            width: 80px;
            height: 100px;
            background-color: #fff;
            border: 1px solid rgb(125, 124, 124);
            text-align: center;
            overflow: hidden;
            margin: 0px auto 10px;
        }

        .doc_category_text {
            font-size: 16px;
        }

        .section-content {
            padding: 12px 0px;
            cursor: pointer;
        }

        .doc_icon {
            font-size: 16px;
            padding: 0px 10px;
        }

        .category_container:hover, .section-content:hover {
            background-color: #dfdfdf;
            border-radius: 5px;
            transition: all 0.3s;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="ribbon"></div>
    </div>
</body>
</html>

Backstage target element

The target property specifies the selector for the element where the Backstage view will be displayed. The target element must have its CSS position set to relative. If it does not, the Backstage will be positioned relative to the nearest parent element that has this styling. By default, the Backstage is positioned relative to the Ribbon element.

import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonBackstage);

let tabs: RibbonTabModel[] = [
  {
    header: "Home",
    groups: [
      {
        header: "Clipboard",
        collections: [
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Paste",
                  iconCss: "e-icons e-paste",
                }
              },
            ],
          },
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Cut",
                  iconCss: "e-icons e-cut",
                }
              },
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Copy",
                  iconCss: "e-icons e-copy",
                }
              },
            ],
          }
        ]
      }
    ]
  }
];

let ribbon: Ribbon = new Ribbon({
    tabs: tabs,
    backStageMenu: {
      target: '#targetElement',
      items: [
        { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' },
        { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: '#newContent' },
        { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: '#openContent' }
      ],
      visible: true,
      backButton: { text: 'Close' }
    }
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
    <title>Essential JS 2 - Ribbon</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-ribbon/styles/tailwind3.css" rel="stylesheet" />
    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .e-ribbon-backstage-content{
            width: 550px;
            height: 530px;
        }

        #targetElement{
            width: 300px;
            height: 300px;
        }

        .section-title {
            font-size: 22px;
        }

        .new-docs {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .category_container {
            width: 150px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
        }

        .doc_category_image {
            width: 80px;
            height: 100px;
            background-color: #fff;
            border: 1px solid rgb(125, 124, 124);
            text-align: center;
            overflow: hidden;
            margin: 0px auto 10px;
        }

        .doc_category_text {
            font-size: 16px;
        }

        .section-content {
            padding: 12px 0px;
            cursor: pointer;
        }

        .doc_icon {
            font-size: 16px;
            padding: 0px 10px;
        }

        .category_container:hover, .section-content:hover {
            background-color: #dfdfdf;
            border-radius: 5px;
            transition: all 0.3s;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="ribbon"></div>
        <div id="targetElement"></div>
    </div>
</body>
<script type="text/x-jsrender" id="homeContent">
    <div id='home-wrapper' style="padding: 20px;">
        <div id='new-section' class='new-wrapper'>
            <div class='section-title'> New </div>
            <div class='category_container'>
                <div class='doc_category_image'></div> 
                <span class='doc_category_text'> New document </span>
            </div>
        </div>
        <div id='block-wrapper'><div class='section-title'> Recent </div>
            <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                <table>
                    <tbody>
                        <tr>
                            <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                            <td> 
                                <span style="display: block; font-size: 14px"> Ribbon.docx </span>
                                <span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</script>
<script type="text/x-jsrender" id="newContent">
    <div id='new-content' style="padding: 20px;">
        <div id='new-section' class='new-wrapper'>
            <div class='section-title'> New </div>
            <div class='category_container'>
                <div class='doc_category_image'></div> 
                <span class='doc_category_text'> New document </span>
            </div>
        </div>
    </div>
</script>
<script type="text/x-jsrender" id="openContent">
    <div style="padding: 20px;">
        <div class="section-content" style="padding: 12px 0px; cursor: pointer">
            <table>
                <tbody>
                    <tr>
                        <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                        <td> 
                            <span style="display: block; font-size: 14px"> Open in Desktop App </span>
                            <span style="font-size: 12px"> Use the full functionality of Ribbon </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="section-content" style="padding: 12px 0px cursor: pointer">
            <table>
                <tbody>
                    <tr>
                        <td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
                        <td> 
                            <span style="display: block; font-size: 14px"> Protect Document </span>
                            <span style="font-size: 12px">To prevent accidental changes,
                                this document has been set to open as view-only.</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</script>

</html>

Customizing with templates

The template property allows for complete customization of the Backstage view’s menu items and their corresponding content area.

import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonBackstage);

let tabs: RibbonTabModel[] = [
  {
    header: "Home",
    groups: [
      {
        header: "Clipboard",
        collections: [
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Paste",
                  iconCss: "e-icons e-paste",
                }
              },
            ],
          },
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Cut",
                  iconCss: "e-icons e-cut",
                }
              },
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Copy",
                  iconCss: "e-icons e-copy",
                }
              },
            ],
          }
        ]
      }
    ]
  }
];

let ribbon: Ribbon = new Ribbon({
    tabs: tabs,
    backStageMenu: {
      visible: true,
      template: '#templateContent'
    }
});
ribbon.appendTo("#ribbon");

let ribbonEle: HTMLElement | null = document.getElementById('ribbon');
(document.getElementById('ribbon_backstage') as HTMLElement).onclick  = () => {
if(ribbonEle)
  (ribbonEle.querySelector('#ribbon_backstagepopup') as HTMLElement).style.display = 'block'
}
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
    <title>Essential JS 2 - Ribbon</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-ribbon/styles/tailwind3.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script type="text/x-jsrender" id="templateContent">
        <div id="temp-content" style="width: 550px; height: 350px; display: flex">
            <div id="items-wrapper" style="width: 130px; height:100%; background: #779de8;">
                <ul>
                    <li id="close" onclick="closeContent(this.id)">
                        <span class="e-icons e-close"></span>
                        Close
                    </li>
                    <li id="new" onclick="contentClick(this.id)">
                        <span class="e-icons e-file-new"></span>
                        New
                    </li>
                    <li id="open" onclick="contentClick(this.id)">
                        <span class="e-icons e-folder-open"></span>
                        Open
                    </li>
                    <li id="save" onclick="contentClick(this.id)">
                        <span class="e-icons e-save"></span>
                        Save
                    </li>
                </ul>
            </div>
            <div id="content-wrapper">
                <div id='new-wrapper' class='content-open' style="padding: 20px;">
                    <div id='new-section' class='new-wrapper'>
                        <div class='section-title'> New </div>
                        <div class='category_container'>
                            <div class='doc_category_image'></div> 
                            <span class='doc_category_text'> New document </span>
                        </div>
                    </div>
                </div>
                <div id="save-wrapper" class='content-close' style="padding: 20px;">
                    <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                        <table>
                            <tbody>
                                <tr>
                                    <td> <span class="doc_icon e-icons e-save"></span> </td>
                                    <td> 
                                        <span style="display: block; font-size: 14px"> Save as </span>
                                        <span style="font-size: 12px"> Save as copy online </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="section-content" style="padding: 12px 0px cursor: pointer">
                        <table>
                            <tbody>
                                <tr>
                                    <td> <span class="doc_icon e-icons e-rename"></span> </td>
                                    <td> 
                                        <span style="display: block; font-size: 14px"> Rename </span>
                                        <span style="font-size: 12px">Rename this file. </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="open-wrapper" class='content-close' style="padding: 20px;">
                    <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                        <table>
                            <tbody>
                                <tr>
                                    <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                                    <td> 
                                        <span style="display: block; font-size: 14px"> Ribbon.docx </span>
                                        <span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                        <table>
                            <tbody>
                                <tr>
                                    <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                                    <td> 
                                        <span style="display: block; font-size: 14px"> Classic_layout.docx </span>
                                        <span style="font-size: 12px">  EJ2 >> Components >> Navigations >> Ribbon >> layouts </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                        <table>
                            <tbody>
                                <tr>
                                    <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                                    <td> 
                                        <span style="display: block; font-size: 14px"> Simplified_layout.docx </span>
                                        <span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> layouts </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </script>
    <script>
        function contentClick(id) {
            let ribbonEle = document.getElementById('ribbon');
            let content = ribbonEle.querySelector('.content-open')
            if(content) { content.classList.replace('content-open', 'content-close'); }
            ribbonEle.querySelector('#' + id +'-wrapper').classList.add('content-open');
        }
        function closeContent() {
            let ribbonEle = document.getElementById('ribbon');
            ribbonEle.querySelector('#ribbon_backstagepopup').style.display = 'none'
        }
    </script>
    <style>
        .e-ribbon-backstage-content{
            width: 550px;
            height: 350px;
        }

        .section-title {
            font-size: 22px;
        }

        .new-docs {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .category_container {
            width: 150px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
        }

        .doc_category_image {
            width: 80px;
            height: 100px;
            background-color: #fff;
            border: 1px solid rgb(125, 124, 124);
            text-align: center;
            overflow: hidden;
            margin: 0px auto 10px;
        }

        .doc_category_text {
            font-size: 16px;
        }

        .section-content {
            padding: 12px 0px;
            cursor: pointer;
        }

        .doc_icon {
            font-size: 16px;
            padding: 0px 10px;
        }

        .category_container:hover, .section-content:hover {
            background-color: #dfdfdf;
            border-radius: 5px;
            transition: all 0.3s;
        }

        #targetElement{
            width: 500px;
            height: 500px;
        }

        #items-wrapper ul {
            padding: 0;
            margin: 0;
        }

        #items-wrapper li {
            height: 38px;
            font-size: 16px;
            list-style: none;
            cursor: pointer;
            text-align: center;
            padding-top: 10px;
        }

        #items-wrapper li span {
            margin-right: 15px;
            font-size: 14px;
        }

        #items-wrapper ul li:hover{
            background-color: #a5bff4;
        }

        #content-wrapper .content-close{
            display: none;
        }

        #content-wrapper .content-open{
            display: block;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="ribbon"></div>
    </div>
</body>

</html>

Setting width and height

The height and width of the Backstage view can be explicitly set using the height and width properties. If not set, the dimensions are calculated automatically based on the content.

import { Ribbon, RibbonTabModel, RibbonItemType, RibbonBackstage } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonBackstage);

let tabs: RibbonTabModel[] = [
  {
    header: "Home",
    groups: [
      {
        header: "Clipboard",
        collections: [
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Paste",
                  iconCss: "e-icons e-paste",
                }
              },
            ],
          },
          {
            items: [
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Cut",
                  iconCss: "e-icons e-cut",
                }
              },
              {
                type: RibbonItemType.Button,
                buttonSettings: {
                  content: "Copy",
                  iconCss: "e-icons e-copy",
                }
              },
            ],
          }
        ]
      }
    ]
  }
];

let ribbon: Ribbon = new Ribbon({
    tabs: tabs,
    backStageMenu: {
      height: '350px',
      width: '550px',
      items: [
        { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: '#homeContent' },
        { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: '#newContent' },
        { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: '#openContent' }
      ],
      visible: true,
      backButton: { text: 'Close' }
    }
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
    <title>Essential JS 2 - Ribbon</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-ribbon/styles/tailwind3.css" rel="stylesheet" />
    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script type="text/x-jsrender" id="homeContent">
        <div id='home-wrapper' style="padding: 20px;">
            <div id='new-section' class='new-wrapper'>
                <div class='section-title'> New </div>
                <div class='category_container'>
                    <div class='doc_category_image'></div> 
                    <span class='doc_category_text'> New document </span>
                </div>
            </div>
            <div id='block-wrapper'><div class='section-title'> Recent </div>
                <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                    <table>
                        <tbody>
                            <tr>
                                <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                                <td> 
                                    <span style="display: block; font-size: 14px"> Ribbon.docx </span>
                                    <span style="font-size: 12px"> EJ2 >> Components >> Navigations >> Ribbon >> default </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </script>
    <script type="text/x-jsrender" id="newContent">
        <div id='new-content' style="padding: 20px;">
            <div id='new-section' class='new-wrapper'>
                <div class='section-title'> New </div>
                <div class='category_container'>
                    <div class='doc_category_image'></div> 
                    <span class='doc_category_text'> New document </span>
                </div>
            </div>
        </div>
    </script>
    <script type="text/x-jsrender" id="openContent">
        <div style="padding: 20px;">
            <div class="section-content" style="padding: 12px 0px; cursor: pointer">
                <table>
                    <tbody>
                        <tr>
                            <td> <span class="doc_icon e-icons e-open-link"></span> </td>
                            <td> 
                                <span style="display: block; font-size: 14px"> Open in Desktop App </span>
                                <span style="font-size: 12px"> Use the full functionality of Ribbon </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="section-content" style="padding: 12px 0px cursor: pointer">
                <table>
                    <tbody>
                        <tr>
                            <td> <span class="doc_icon e-icons e-protect-sheet"></span> </td>
                            <td> 
                                <span style="display: block; font-size: 14px"> Protect Document </span>
                                <span style="font-size: 12px">To prevent accidental changes,
                                    this document has been set to open as view-only.</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </script>
    <style>
        .section-title {
            font-size: 22px;
        }

        .new-docs {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .category_container {
            width: 150px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
        }

        .doc_category_image {
            width: 80px;
            height: 100px;
            background-color: #fff;
            border: 1px solid rgb(125, 124, 124);
            text-align: center;
            overflow: hidden;
            margin: 0px auto 10px;
        }

        .doc_category_text {
            font-size: 16px;
        }

        .section-content {
            padding: 12px 0px;
            cursor: pointer;
        }

        .doc_icon {
            font-size: 16px;
            padding: 0px 10px;
        }

        .category_container:hover, .section-content:hover {
            background-color: #dfdfdf;
            border-radius: 5px;
            transition: all 0.3s;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="ribbon"></div>
    </div>
</body>

</html>

Adding Backstage events