diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/razor
new file mode 100644
index 0000000000..f7aec5e3eb
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/razor
@@ -0,0 +1,11 @@
+@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").EnableToolbar(true).BackstageMenu(new {
+        text = "File",
+        backButton = new { text = "close" },
+        items = new object[] {
+            new { id = "new", text = "New", iconCss = "e-icons e-de-ctnr-new" }
+        }
+    }).Render()
+
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper
new file mode 100644
index 0000000000..317ecf5faa
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper
@@ -0,0 +1,12 @@
+<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" serviceUrl="api/documenteditor/"
+    backstageMenu="@(new {
+        text = "File",
+        backButton = new { text = "close" },
+        items = new object[] {
+            new { id = "new", text = "New", iconCss = "e-icons e-de-ctnr-new" }
+        }
+    })">></ejs-documenteditorcontainer>
+    
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/razor
new file mode 100644
index 0000000000..efeaf0dfc8
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/razor
@@ -0,0 +1,14 @@
+@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").EnableToolbar(true).FileMenuItems(new object[] {
+        "New",
+        "Print",
+        new { text = "Export", id = "custom_item", iconCss = "e-icons e-export" }
+    }).FileMenuItemClick("onFileMenuItemClick").Render()
+
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+    function onFileMenuItemClick(args) {
+        if (args.item.id) {
+            document.getElementById('container').ej2_instances[0].documentEditor.save('Sample', 'Docx');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/tagHelper
new file mode 100644
index 0000000000..160f5f7712
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/tagHelper
@@ -0,0 +1,15 @@
+<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" serviceUrl="api/documenteditor/"
+    fileMenuItems="@(new object[] {
+            "New",
+            "Print",
+            new { text = "Export", id = "custom_item", iconCss = "e-icons e-export" }
+        })" fileMenuItemClick="onFileMenuItemClick"></ejs-documenteditorcontainer>
+        
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+    function onFileMenuItemClick(args) {
+        if (args.item.id) {
+            document.getElementById('container').ej2_instances[0].documentEditor.save('Sample', 'Docx');
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/document-editor/EJ2_ASP.MVC/ribbon.md b/ej2-asp-core-mvc/document-editor/EJ2_ASP.MVC/ribbon.md
new file mode 100644
index 0000000000..5d34438f9a
--- /dev/null
+++ b/ej2-asp-core-mvc/document-editor/EJ2_ASP.MVC/ribbon.md
@@ -0,0 +1,58 @@
+---
+layout: post
+title: Ribbon in ##Platform_Name## Document editor control | Syncfusion
+description: Learn here all about the Ribbon UI in Syncfusion ##Platform_Name## Document editor control, how to switch between Ribbon and Toolbar modes.
+platform: ej2-asp-core-mvc
+control: Ribbon
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Ribbon in ##Platform_Name## Document Editor Control
+
+The Document Editor provides a modern Ribbon interface similar to Microsoft Word's interface. This Ribbon UI provides an efficient and intuitive way to access editing features, organizing commands within well-structured tabs and groups to enhance your document editing experience. Additionally, the Ribbon interface supports contextual tabs. Contextual tabs appear only when certain elements, such as tables, images, or headers/footers, are selected in the document.
+
+You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** ribbon layouts.
+
+## Enable Ribbon Mode
+
+To enable Ribbon in Document Editor, use the `toolbarMode` property of `DocumentEditorContainer`. The available toolbar modes are:
+
+- **'Toolbar'** - The traditional toolbar UI.
+- **'Ribbon'** - The Ribbon UI, which provides a tabbed interface with grouped commands.
+
+By default, `toolbarMode` is `Toolbar`.
+
+The following code shows the how to enable the `Ribbon` in Document Editor.
+
+```typescript
+
+@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").ServiceUrl("api/documenteditor/").Render()
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
+```
+
+## Ribbon Layouts
+
+Document Editor provides two different Ribbon layouts:
+
+- **Classic**: A traditional Office-like ribbon with detailed grouping and larger icons
+- **Simplified**: A more compact ribbon design with streamlined controls
+
+By default, `ribbonLayout` is set to `Simplified`. 
+
+The following code shows the how to configure the ribbon layout in Document Editor:
+
+```typescript
+
+@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").RibbonLayout("Classic").ServiceUrl("api/documenteditor/").Render()
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
+```
+
+## See Also
+
+* [How to customize the ribbon](../document-editor/how-to/customize-ribbon)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/document-editor/EJ2_ASP.NETCORE/ribbon.md b/ej2-asp-core-mvc/document-editor/EJ2_ASP.NETCORE/ribbon.md
new file mode 100644
index 0000000000..a91059e671
--- /dev/null
+++ b/ej2-asp-core-mvc/document-editor/EJ2_ASP.NETCORE/ribbon.md
@@ -0,0 +1,58 @@
+---
+layout: post
+title: Ribbon in ##Platform_Name## Document editor control | Syncfusion
+description: Learn here all about the Ribbon UI in Syncfusion ##Platform_Name## Document editor control, how to switch between Ribbon and Toolbar modes.
+platform: ej2-asp-core-mvc
+control: Ribbon
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Ribbon in ##Platform_Name## Document Editor Control
+
+The Document Editor provides a modern Ribbon interface similar to Microsoft Word's interface. This Ribbon UI provides an efficient and intuitive way to access editing features, organizing commands within well-structured tabs and groups to enhance your document editing experience. Additionally, the Ribbon interface supports contextual tabs. Contextual tabs appear only when certain elements, such as tables, images, or headers/footers, are selected in the document.
+
+You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** ribbon layouts.
+
+## Enable Ribbon Mode
+
+To enable Ribbon in Document Editor, use the `toolbarMode` property of `DocumentEditorContainer`. The available toolbar modes are:
+
+- **'Toolbar'** - The traditional toolbar UI.
+- **'Ribbon'** - The Ribbon UI, which provides a tabbed interface with grouped commands.
+
+By default, `toolbarMode` is `Toolbar`.
+
+The following code shows the how to enable the `Ribbon` in Document Editor.
+
+```typescript
+
+<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" serviceUrl="api/documenteditor/"></ejs-documenteditorcontainer>
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
+```
+
+## Ribbon Layouts
+
+Document Editor provides two different Ribbon layouts:
+
+- **Classic**: A traditional Office-like ribbon with detailed grouping and larger icons
+- **Simplified**: A more compact ribbon design with streamlined controls
+
+By default, `ribbonLayout` is set to `Simplified`. 
+
+The following code shows the how to configure the ribbon layout in Document Editor:
+
+```typescript
+
+<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" ribbonLayout="Classic" serviceUrl="api/documenteditor/"></ejs-documenteditorcontainer>
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
+```
+
+## See Also
+
+* [How to customize the ribbon](../document-editor/how-to/customize-ribbon)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md
new file mode 100644
index 0000000000..0371f94d03
--- /dev/null
+++ b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md
@@ -0,0 +1,277 @@
+---
+layout: post
+title: Customize Ribbon in ##Platform_Name## Document Editor | Syncfusion
+description: Learn how to customize the ribbon in Syncfusion ##Platform_Name## Document Editor - file menu, backstage, tabs, groups, and items.
+platform: ej2-asp-core-mvc
+control: Ribbon Customization
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Customize Ribbon in ##Platform_Name## Document Editor
+
+The Syncfusion Document Editor provides an extensive and flexible API to customize the built-in ribbon UI. You can:
+
+- Customize the File menu.
+- Add the Backstage menu instead of File menu.
+- Show, hide, or add Ribbon tabs.
+- Show, hide, or add groups within tabs.
+- Show, hide, add, enable, or disable items within groups.
+
+Below are detailed examples for each ribbon customization scenario.
+
+## File Menu Customization
+
+Document Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the `fileMenuItems` property.
+
+In below code example, In the example below, the "Open" and "Export" items have been removed from the File Menu Items, and new custom items have been added.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/customize-ribbon-file/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Customize-ribbon-file.cs" %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/customize-ribbon-file/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Customize-ribbon-file.cs" %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+## Backstage Menu Customization
+
+The Document Editor provides an `backStageMenu` API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden.
+
+The following code example shows how to add the backstage menu items.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Customize-ribbon-backstage.cs" %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/customize-ribbon-backstage/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Customize-ribbon-backstage.cs" %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage)
+
+## Tab Customization
+
+You can customize the ribbon tabs in the Document Editor by showing, hiding, or adding tabs according to your application's requirements.
+
+### Show/Hide Tab
+
+Document editor provides the `showTab` API to show and hide the existing tab using existing `RibbonTabType` and `tabId`.
+
+The following code example how to show/hide existing tab using existing tab type and tab id.
+
+```typescript
+
+// To hide the Home tab using the built-in `RibbonTabType`
+container.ribbon.showTab('Home', false);
+
+// To hide a tab by its tab id (for example, a custom tab)
+container.ribbon.showTab('custom_tab', false);
+```
+
+### Add Tab
+
+The Document Editor provides the `addTab` API, which allows you to insert a new custom tab either between existing tabs or at the end of the ribbon tabs.
+
+```typescript
+
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+        
+        // For initialization before adding ribbon tab
+        setTimeout(function () {
+            var container = document.getElementById('container').ej2_instances[0];
+            // To add the tab at end of tab
+            var ribbonTab = {
+                header: 'Custom Tab',
+                id: 'custom_tab',
+                groups: [{
+                    header: 'Custom Group',
+                    collections: [{
+                        items: [{
+                            type: 'Button',
+                            buttonSettings: {
+                                content: 'New',
+                                iconCss: 'e-icons e-de-ctnr-new',
+                                clicked: function () {
+                                    container.documentEditor.openBlank();
+                                }
+                            }
+                        }]
+                    }]
+                }]
+            };
+            container.ribbon.addTab(ribbonTab);
+
+            // To add the tab before the Insert tab(exising tab)
+            container.ribbon.addTab(ribbonTab, 'Insert');
+        }, 100);
+</script>
+
+```
+
+## Group Customization
+
+You can also customize ribbon groups within a tab to better organize commands or add new functionalities as per your needs.
+
+### Show/Hide Group 
+
+Document Editor provides an `showGroup` API to show or hide existing groups within a ribbon tab.
+
+The following code example show how to show/hide the group using group Id or `RibbonGroupInfo`.
+
+```typescript
+
+// To hide the clipboard group using group index
+container.ribbon.showGroup({tabId: 'Home', index: 1} , false);
+
+// To show the clipboard group using group index
+container.ribbon.showGroup({tabId: 'Home', index: 1} , true);
+
+// To hide the group using id
+container.ribbon.showGroup('custom_group', false);
+
+```
+
+### Add Group
+
+To extend the ribbon's functionality, you can add custom groups to any tab. This allows you to organize related commands together within a tab.
+
+```typescript
+
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+        
+        // For initialization before adding ribbon tab
+        setTimeout(function () {
+            var container = document.getElementById('container').ej2_instances[0];
+            // Add the new group at the end of the Home tab
+            var ribbonGroup = {
+                header: 'Custom Group',
+                collections: [{
+                    items: [{
+                        type: 'Button',
+                        buttonSettings: {
+                            content: 'New',
+                            iconCss: 'e-icons e-de-ctnr-new',
+                            clicked: function () {
+                                container.documentEditor.openBlank();
+                            }
+                        }
+                    }]
+                }]
+            };
+            container.ribbon.addGroup('Home', ribbonGroup);
+
+            // Add the new group at the specified index of the Home tab (before the Clipboard group)
+
+            container.ribbon.addGroup('Home', ribbonGroup, 1);
+        }, 100);
+</script>
+
+```
+
+## Item Customization
+
+You can customize individual items within ribbon groups. This includes showing, hiding, enabling, disabling, or adding new items to any group within a ribbon tab.
+
+### Show/Hide Item
+
+Using `showItems` API in Document editor ribbon to enable/disable the existing item. Here, you can specify the item Id or `RibbonItemInfo`.
+
+The following code example show how to show/hide the item using item Id or `RibbonItemInfo`.
+
+```typescript
+// To hide the Bold and Italic items using ribbon item information
+container.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , false);
+
+// To show the Bold and Italic items using ribbon item information
+container.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , true);
+
+// To hide the item using item id
+container.ribbon.showItems('custom_item', false);
+```
+
+### Enable/Disable Item
+
+Using `enableItems` API in Document editor ribbon to enable/disable the existing item.
+
+```typescript
+// To disable the underline using ribbon item info
+container.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },false);
+
+// To enable the underline using ribbon item info
+container.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },true);
+
+// To disable the item using id
+container.ribbon.enableItems('custom_item', false);
+
+```
+
+### Add Item
+
+You can use the `addItem` API in the Document Editor ribbon to add a new item. Additionally, you can specify the target tab and group where the new item should be placed.
+
+```typescript
+
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+
+    // For initialization before adding ribbon tab
+    setTimeout(function () {
+        var container = document.getElementById('container').ej2_instances[0];
+        
+        // To add the item at the end of the specified group (the item will be added at the end of the Undo group)
+        var ribbonItem = {
+            type: 'Button',
+            buttonSettings: {
+                content: 'New',
+                iconCss: 'e-icons e-de-ctnr-new',
+                clicked: function () {
+                    container.documentEditor.openBlank();
+                }
+            }
+        };
+        container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem);
+
+        // To add the item before the specified item index (the item will be added before the Redo item in the Undo group)
+
+        container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem, 1);
+    }, 100);
+</script>
+
+```
+
+
+## Related Links
+
+- [File menu Customization Demo](https://ej2.syncfusion.com/demos/#/material/document-editor/ribbon-customization)
\ No newline at end of file
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
index f2db5f8117..3fae4bc6e4 100644
--- a/ej2-asp-core-toc.html
+++ b/ej2-asp-core-toc.html
@@ -962,6 +962,7 @@
 		<li><a href="/ej2-asp-core/document-editor/feature-module">Feature modules</a></li>
 		<li><a href="/ej2-asp-core/document-editor/import">Import</a></li>
 		<li><a href="/ej2-asp-core/document-editor/export">Export</a></li>
+		<li><a href="/ej2-asp-core/document-editor/ribbon">Ribbon</a></li>
 		<li><a href="/ej2-asp-core/document-editor/collaborative-editing/overview">Collaborative Editing</a>
 			<ul>
 			<li><a href="/ej2-asp-core/document-editor/collaborative-editing/using-redis-cache-asp-net">Using Redis in ASP.NET Core</a></li>
@@ -1030,6 +1031,7 @@
 		<li><a href="/ej2-asp-core/document-editor/how-to/change-the-default-search-highlight-color">Change the default search highlight color</a></li>
 		<li><a href="/ej2-asp-core/document-editor/how-to/optimize-sfdt">Optimize the SFDT file</a></li>
 		<li><a href="/ej2-asp-core/document-editor/how-to/enable-ruler-in-document-editor-component">Enable ruler in Document Editor component</a></li>
+		<li><a href="/ej2-asp-core/document-editor/how-to/customize-ribbon">Customize Ribbon</a></li>
 		</ul>
 		</li>
 		<li>FAQ
diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html
index 058c61ebcd..49d718ae2e 100644
--- a/ej2-asp-mvc-toc.html
+++ b/ej2-asp-mvc-toc.html
@@ -945,6 +945,7 @@
 		<li><a href="/ej2-asp-mvc/document-editor/spell-check">SpellCheck</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/global-local">Globalization</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/notes">Footnotes and Endnotes</a></li>
+		<li><a href="/ej2-asp-mvc/document-editor/ribbon">Ribbon</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/security-advisories">Security Advisories</a></li>
 		<li>How To
 		<ul>
@@ -978,6 +979,7 @@
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/change-the-default-search-highlight-color">Change the default search highlight color</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/optimize-sfdt">Optimize the SFDT file</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/enable-ruler-in-document-editor-component">Enable ruler in Document Editor component</a></li>
+		<li><a href="/ej2-asp-mvc/document-editor/how-to/customize-ribbon">Customize Ribbon</a></li>
 		</ul>
 		</li>
 		<li>FAQ