Ribbon Backstage

26 Sep 202324 minutes to read

The Ribbon supports backstage view which is an addition to the traditional file menu. It displays information like application settings, user details, etc. The backstage view can be enabled by setting the backStageMenu property.

The backstage view options are displayed on the left, while the content of each option is shown on the right.

Adding backstage items

The menu items can be added to the backstage view by using the items property. You can show the backstage view by setting the visible property to true. By default, the backstage view is hidden.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective , RibbonBackstage, Inject  } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings = {
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
            { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
            { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    function newContentTemplate () {
        return (
            "<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> "
        )
    }

    function openContentTemplate () {
        return (
            "<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>"
        )
    }
    return (
        <RibbonComponent id="backstage-ribbon" backStageMenu={ backstageSettings }>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonBackstage , Inject, BackStageMenuModel } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings: BackStageMenuModel = {
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
            { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
            { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    function newContentTemplate () {
        return (
            "<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> "
        )
    }

    function openContentTemplate () {
        return (
            "<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>"
        )
    }
    return (
        <RibbonComponent id="backstage-ribbon" backStageMenu={backstageSettings}>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Represents the styles for Ribbon Backstage */
.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;
}

You can use the isFooter property in the items collection to add the backstage view footer items. By default, the value is false.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective , RibbonBackstage, Inject  } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings = {
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
            { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
            { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() },
            { separator: true, isFooter: true },
            { id: 'account', text: 'Account', isFooter: true, content: accountContent() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    function newContentTemplate () {
        return (
            "<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> "
        )
    }

    function openContentTemplate () {
        return (
            "<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>"
        )
    }

    function accountContent () {
        return (
            "<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>"
        )
    }

    return (
        <RibbonComponent id="backstage-ribbon" backStageMenu={ backstageSettings }>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonBackstage , Inject, BackStageMenuModel } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings: BackStageMenuModel = {
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
            { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
            { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() },
            { separator: true, isFooter: true },
            { id: 'account', text: 'Account', isFooter: true, content: accountContent() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    function newContentTemplate () {
        return (
            "<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> "
        )
    }

    function openContentTemplate () {
        return (
            "<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>"
        )
    }

    function accountContent () {
        return (
            "<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>"
        )
    } 
    return (
        <RibbonComponent id="backstage-ribbon" backStageMenu={backstageSettings}>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Represents the styles for Ribbon Backstage */
.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;
}

Adding separator

The separators are horizontal lines used to separate the backstage view items. You can use the separator property to split the menu items.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective , RibbonBackstage, Inject  } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings = {
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
            { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
            { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() },
            { separator: true },
            { text: 'Print', content: printContent() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    function newContentTemplate () {
        return (
            "<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> "
        )
    }

    function openContentTemplate () {
        return (
            "<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>"
        )
    }

    function printContent () {
        return (
            "<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>"
        )
    }

    return (
        <RibbonComponent id="backstage-ribbon" backStageMenu={ backstageSettings }>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonBackstage , Inject, BackStageMenuModel } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings: BackStageMenuModel = {
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
            { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
            { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() },
            { separator: true },
            { text: 'Print', content: printContent() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    function newContentTemplate () {
        return (
            "<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> "
        )
    }

    function openContentTemplate () {
        return (
            "<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>"
        )
    }

    function printContent () {
        return (
            "<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>"
        )
    } 
    return (
        <RibbonComponent id="backstage-ribbon" backStageMenu={backstageSettings}>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Represents the styles for Ribbon Backstage */
.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;
}

Back button

You can use the backButton property to customize the text and icon of the close button using the text and iconCss property. You can show the back button by setting the visible property to true.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective , RibbonBackstage, Inject  } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings = {
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    return (
        <RibbonComponent id="backstage-ribbon" backStageMenu={ backstageSettings }>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonBackstage , Inject, BackStageMenuModel } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings: BackStageMenuModel = {
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    return (
        <RibbonComponent id="backstage-ribbon" backStageMenu={backstageSettings}>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Represents the styles for Ribbon Backstage */
.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;
}

Backstage target

The target property specifies the element selector in which backstage will be displayed. The target element should have the position as relative, else the backstage will be positioned nearest to the relative element. By default, the backstage is positioned to ribbon element.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective , RibbonBackstage, Inject  } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings = {
        target: '#targetElement',
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
            { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
            { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    function newContentTemplate () {
        return (
            "<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> "
        )
    }

    function openContentTemplate () {
        return (
            "<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>"
        )
    }
    return (
        <div>
            <RibbonComponent id="backstage-ribbon" backStageMenu={ backstageSettings }>
                <RibbonTabsDirective>
                    <RibbonTabDirective header="Home" >
                        <RibbonGroupsDirective>
                            <RibbonGroupDirective header="Paragraph">
                                <RibbonCollectionsDirective>
                                    <RibbonCollectionDirective>
                                        <RibbonItemsDirective>
                                            <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                            </RibbonItemDirective>
                                            <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                            </RibbonItemDirective>
                                            <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                            </RibbonItemDirective>
                                        </RibbonItemsDirective>
                                    </RibbonCollectionDirective>
                                </RibbonCollectionsDirective>
                            </RibbonGroupDirective>
                        </RibbonGroupsDirective>
                    </RibbonTabDirective>
                </RibbonTabsDirective>
                <Inject services={[RibbonBackstage]} />
            </RibbonComponent>
            <div id="targetElement"></div>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonBackstage , Inject, BackStageMenuModel } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings: BackStageMenuModel = {
        target: '#targetElement',
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
            { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
            { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    function newContentTemplate () {
        return (
            "<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> "
        )
    }

    function openContentTemplate () {
        return (
            "<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>"
        )
    }
    return (
        <div>
            <RibbonComponent id="backstage-ribbon" backStageMenu={backstageSettings}>
                <RibbonTabsDirective>
                    <RibbonTabDirective header="Home" >
                        <RibbonGroupsDirective>
                            <RibbonGroupDirective header="Paragraph">
                                <RibbonCollectionsDirective>
                                    <RibbonCollectionDirective>
                                        <RibbonItemsDirective>
                                            <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                            </RibbonItemDirective>
                                            <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                            </RibbonItemDirective>
                                            <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                            </RibbonItemDirective>
                                        </RibbonItemsDirective>
                                    </RibbonCollectionDirective>
                                </RibbonCollectionsDirective>
                            </RibbonGroupDirective>
                        </RibbonGroupsDirective>
                    </RibbonTabDirective>
                </RibbonTabsDirective>
                <Inject services={[RibbonBackstage]} />
            </RibbonComponent>
            <div id="targetElement"></div>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Represents the styles for Ribbon Backstage */
.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;
}

Template

You can use the template property to modify the backstage view menu items and their contents.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective , RibbonBackstage, Inject  } from "@syncfusion/ej2-react-ribbon";

function App() {
    let ribbonEle = null;
    React.useEffect(()=> {
        ribbonEle = document.getElementById('ribbon');
        const backstageButton = document.querySelector('.e-ribbon-backstage') ;
        if (backstageButton) {
            backstageButton.addEventListener('click', displayPopup);
        }
    },[])

    const backstageSettings = {
        visible: true,
        template: homeContentTemplate()
    }

    function displayPopup() {
        let backstagePopup = ribbonEle.querySelector('#ribbon_backstagepopup');
        if (backstagePopup) {
          backstagePopup.style.display = 'block';
        }
      }

    function contentClick (id) {
        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 () {
        ribbonEle.querySelector('#ribbon_backstagepopup').style.display = 'none'
    }

    function homeContentTemplate () {
        return "<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()'><span class='e-icons e-close'></span>Close</li><li id='new' onclick='contentClick('new')'><span class='e-icons e-file-new'></span>New</li><li id='open' onclick='contentClick('open')'><span class='e-icons e-folder-open'></span>Open</li><li id='save' onclick='contentClick('save')'><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>"
    }
    

    return (
        <RibbonComponent id="ribbon" backStageMenu={backstageSettings}>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonBackstage , Inject, BackStageMenuModel } from "@syncfusion/ej2-react-ribbon";

function App() {
    let ribbonEle: HTMLElement | null = null;
    React.useEffect(()=>{
        ribbonEle = document.getElementById('ribbon') as HTMLElement;
        const backstageButton = document.querySelector('.e-ribbon-backstage') as HTMLElement;
        if (backstageButton) {
            backstageButton.addEventListener('click', displayPopup);
        }
    },[])

    const backstageSettings: BackStageMenuModel = {
        visible: true,
        template: homeContentTemplate()
    }

    function displayPopup() {
        let backstagePopup = ribbonEle.querySelector('#ribbon_backstagepopup') as HTMLElement;
        if (backstagePopup) {
          backstagePopup.style.display = 'block';
        }
      }

    function contentClick (id: string) {
        let content = ribbonEle.querySelector('.content-open') as HTMLElement;
        if(content) { content.classList.replace('content-open', 'content-close'); }
        (ribbonEle.querySelector('#' + id +'-wrapper') as HTMLElement).classList.add('content-open');
    }

    function closeContent () {
        (ribbonEle.querySelector('#ribbon_backstagepopup') as HTMLElement).style.display = 'none'
    }

    function homeContentTemplate () {
        return "<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()'><span class='e-icons e-close'></span>Close</li><li id='new' onclick='contentClick('new')'><span class='e-icons e-file-new'></span>New</li><li id='open' onclick='contentClick('open')'><span class='e-icons e-folder-open'></span>Open</li><li id='save' onclick='contentClick('save')'><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>"
    }
    

    return (
        <RibbonComponent id="ribbon" backStageMenu={backstageSettings}>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Represents the styles for Ribbon Backstage */
.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;
}

Setting width and height

You can customize the height and width of the backstage view using the height and width property. By default, dimensions are set based on the content added.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective , RibbonBackstage, Inject  } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings = {
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
            { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
            { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    function newContentTemplate () {
        return (
            "<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> "
        )
    }

    function openContentTemplate () {
        return (
            "<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>"
        )
    }
    return (
        <RibbonComponent id="backstage-ribbon" backStageMenu={ backstageSettings }>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonBackstage , Inject, BackStageMenuModel } from "@syncfusion/ej2-react-ribbon";

function App() {
    const backstageSettings: BackStageMenuModel = {
        visible: true,
        items: [
            { id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
            { id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
            { id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() }
        ],
        backButton: {
            text: 'Close',
        }
    }

    function homeContentTemplate () {
        return "<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>"
    }
    
    function newContentTemplate () {
        return (
            "<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> "
        )
    }

    function openContentTemplate () {
        return (
            "<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>"
        )
    }
    return (
        <RibbonComponent id="backstage-ribbon" backStageMenu={backstageSettings}>
            <RibbonTabsDirective>
                <RibbonTabDirective header="Home" >
                    <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Paragraph">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paste", content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                    </RibbonGroupsDirective>
                </RibbonTabDirective>
            </RibbonTabsDirective>
            <Inject services={[RibbonBackstage]} />
        </RibbonComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Represents the styles for Ribbon Backstage */
.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;
}

Adding Backstage events