diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/contextualtab.cs b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/contextualtab.cs
new file mode 100644
index 0000000000..c6a37a012e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/contextualtab.cs
@@ -0,0 +1,4 @@
+public ActionResult ContextualTab()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/razor b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/razor
new file mode 100644
index 0000000000..6c30aa1293
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/razor
@@ -0,0 +1,153 @@
+@using Syncfusion.EJ2.Ribbon
+@using Syncfusion.EJ2.Navigations
+
+@{
+  List<RibbonContextualTab> contextTabs = new List<RibbonContextualTab>()
+  {
+    new RibbonContextualTab
+    {
+      Visible = true,
+      Tabs = new List<RibbonTab>()
+      {
+        new RibbonTab()
+        {
+          Id="ShapeFormat", Header = "Shape Format" ,
+          Groups = new List<RibbonGroup>()
+          {
+            new RibbonGroup()
+            {
+              Header="Text decoration",
+              ShowLauncherIcon=true,
+              Collections = new List<RibbonCollection>()
+              {
+                new RibbonCollection()
+                {
+                  Items = new List<RibbonItem>()
+                  {
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Text Header",
+                        IconCss = "e-icons e-text-header"
+                      }
+                    },
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Text Wrap",
+                        IconCss = "e-icons e-text-wrap"
+                      }
+                    },
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Text Annotation",
+                        IconCss = "e-icons e-text-annotation"
+                      }
+                    }
+                  }
+                }
+              }
+            },
+            new RibbonGroup()
+            {
+              Header="Accessibility",
+              Collections = new List<RibbonCollection>()
+              {
+                new RibbonCollection()
+                {
+                  Items = new List<RibbonItem>()
+                  {
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      AllowedSizes = RibbonItemSize.Large,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Alt Text",
+                        IconCss = "e-icons e-text-alternative"
+                      }
+                    }
+                  }
+                }
+              }
+            },
+            new RibbonGroup()
+            {
+              Header="Arrange",
+              ShowLauncherIcon=true,
+              Collections = new List<RibbonCollection>()
+              {
+                new RibbonCollection()
+                {
+                  Items = new List<RibbonItem>()
+                  {
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Bring Forward",
+                        IconCss = "e-icons e-bring-forward"
+                      }
+                    },
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Send Backward",
+                        IconCss = "e-icons e-send-backward"
+                      }
+                    },
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Selection Pane",
+                        IconCss = "e-icons e-show-hide-panel"
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}
+
+@Html.EJS().Ribbon("ribbon").ContextualTabs(contextTabs).Tabs(tab =>
+{
+  tab.Header("Home").Groups(groups =>
+
+  {
+    groups.Header("Clipboard").GroupIconCss("e-icons e-paste").ShowLauncherIcon(true).Id("lipboardGroup").Collections(collection =>
+    {
+      collection.Items(items =>
+      {
+        items.Type(RibbonItemType.Button).ButtonSettings(button =>
+        {
+          button.IconCss("e-icons e-cut").Content("Cut");
+        }).Add();
+        items.Type(RibbonItemType.Button).ButtonSettings(button =>
+        {
+          button.IconCss("e-icons e-copy").Content("Copy");
+        }).Add();
+        items.Type(RibbonItemType.Button).ButtonSettings(button =>
+        {
+          button.IconCss("e-icons e-format-painter").Content("Format Painter");
+        }).Add();
+      }).Add();
+    }).Add();
+  }).Add();
+}).Render()
diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/tagHelper b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/tagHelper
new file mode 100644
index 0000000000..e20bbcdd9d
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/add-contextual-tab/tagHelper
@@ -0,0 +1,83 @@
+@using Syncfusion.EJ2.Ribbon
+@using Syncfusion.EJ2.Navigations
+
+<ejs-ribbon id="ribbon">
+     <e-ribbon-tabs>
+        <e-ribbon-tab header="Home">
+            <e-ribbon-groups>
+                <e-ribbon-group header="Clipboard" id="clipboardGroup" groupIconCss="e-icons e-paste" showLauncherIcon=true>
+                    <e-ribbon-collections>
+                        <e-ribbon-collection>
+                            <e-ribbon-items>
+                                <e-ribbon-item type="Button">
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                                <e-ribbon-item type="Button">
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-copy" content="Copy"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                                <e-ribbon-item type="Button">
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-format-painter" content="Format Painter"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                            </e-ribbon-items>
+                        </e-ribbon-collection>
+                    </e-ribbon-collections>
+                </e-ribbon-group>
+            </e-ribbon-groups>
+         </e-ribbon-tab>
+    </e-ribbon-tabs>
+    <e-ribbon-contextual-tabs>
+        <e-ribbon-contextual-tab visible=true>
+            <e-ribbon-tabs>
+                <e-ribbon-tab header="Shape Format" id="ShapeFormat">
+                    <e-ribbon-groups>
+                        <e-ribbon-group header="Text decoration" id="Textdecoration" showLauncherIcon=true>
+                            <e-ribbon-collections>
+                                <e-ribbon-collection>
+                                    <e-ribbon-items>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-text-header" content="Text Header"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-text-wrap" content="Text Wrap"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-text-annotation" content="Text Annotation"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                    </e-ribbon-items>
+                                </e-ribbon-collection>
+                            </e-ribbon-collections>
+                        </e-ribbon-group>
+                        <e-ribbon-group header="Accessibility">
+                            <e-ribbon-collections>
+                                <e-ribbon-collection>
+                                    <e-ribbon-items>
+                                        <e-ribbon-item type="Button" allowedSizes=Large>
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-text-alternative" content="Alt Text"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                    </e-ribbon-items>
+                                </e-ribbon-collection>
+                            </e-ribbon-collections>
+                        </e-ribbon-group>
+                        <e-ribbon-group header="Arrange" showLauncherIcon=true>
+                            <e-ribbon-collections>
+                                <e-ribbon-collection>
+                                    <e-ribbon-items>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-bring-forward" content="Bring Forward"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-send-backward" content="Send Backward"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-show-hide-panel" content="Selection Pane"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                    </e-ribbon-items>
+                                </e-ribbon-collection>
+                            </e-ribbon-collections>
+                        </e-ribbon-group>
+                    </e-ribbon-groups>
+                </e-ribbon-tab>
+            </e-ribbon-tabs>
+        </e-ribbon-contextual-tab>
+    </e-ribbon-contextual-tabs>
+</ejs-ribbon>
diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/method/contextualtab.cs b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/method/contextualtab.cs
new file mode 100644
index 0000000000..c6a37a012e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/method/contextualtab.cs
@@ -0,0 +1,4 @@
+public ActionResult ContextualTab()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/method/razor b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/method/razor
new file mode 100644
index 0000000000..416c680aac
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/method/razor
@@ -0,0 +1,111 @@
+@using Syncfusion.EJ2.Ribbon
+@using Syncfusion.EJ2.Navigations
+
+@{
+  List<RibbonContextualTab> contextTabs = new List<RibbonContextualTab>()
+{
+    new RibbonContextualTab
+    {
+      Tabs = new List<RibbonTab>()
+  {
+        new RibbonTab()
+        {
+          Header = "Arrange & View",
+          Id = "ArrangeView",
+          Groups = new List<RibbonGroup>()
+      {
+            new RibbonGroup()
+            {
+              Header="Arrange",
+              ShowLauncherIcon=true,
+              Collections = new List<RibbonCollection>()
+          {
+                new RibbonCollection()
+                {
+                  Items = new List<RibbonItem>()
+              {
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Bring Forward",
+                        IconCss = "e-icons e-bring-forward"
+                      }
+                    },
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Send Backward",
+                        IconCss = "e-icons e-send-backward"
+                      }
+                    },
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Selection Pane",
+                        IconCss = "e-icons e-show-hide-panel"
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}
+<div>
+  <button class="e-btn" id="show-contextual"> Show tab </button>
+  <button class="e-btn" id="hide-contextual"> Hide tab </button>
+</div>
+@Html.EJS().Ribbon("ribbon").ContextualTabs(contextTabs).Created("ribbonCreated").Tabs(tab =>
+{
+  tab.Header("Home").Groups(groups =>
+
+  {
+    groups.Header("Clipboard").GroupIconCss("e-icons e-paste").ShowLauncherIcon(true).Id("lipboardGroup").Collections(collection =>
+    {
+      collection.Items(items =>
+      {
+        items.Type(RibbonItemType.Button).ButtonSettings(button =>
+        {
+          button.IconCss("e-icons e-cut").Content("Cut");
+        }).Add();
+        items.Type(RibbonItemType.Button).ButtonSettings(button =>
+        {
+          button.IconCss("e-icons e-copy").Content("Copy");
+        }).Add();
+        items.Type(RibbonItemType.Button).ButtonSettings(button =>
+        {
+          button.IconCss("e-icons e-format-painter").Content("Format Painter");
+        }).Add();
+      }).Add();
+    }).Add();
+  }).Add();
+}).Render()
+
+<script>
+  var ribbon;
+  function ribbonCreated() {
+      ribbon = document.getElementById('ribbon').ej2_instances[0];
+  }
+  document.getElementById('show-contextual').onclick = () => {
+    ribbon.showTab('ArrangeView', true);
+  }
+  document.getElementById('hide-contextual').onclick = () => {
+    ribbon.hideTab('ArrangeView', true);
+  }
+</script>
+
+<style>
+  #ribbon {
+    margin-top: 20px;
+  }
+</style>
diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/method/tagHelper b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/method/tagHelper
new file mode 100644
index 0000000000..6b67452273
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/method/tagHelper
@@ -0,0 +1,78 @@
+@using Syncfusion.EJ2.Ribbon
+@using Syncfusion.EJ2.Navigations
+
+<div>
+  <button class="e-btn" id="show-contextual"> Show tab </button>
+  <button class="e-btn" id="hide-contextual"> Hide tab </button>
+</div>
+<ejs-ribbon id="ribbon" created="ribbonCreated">
+     <e-ribbon-tabs>
+        <e-ribbon-tab header="Home">
+            <e-ribbon-groups>
+                <e-ribbon-group header="Clipboard" id="clipboardGroup" groupIconCss="e-icons e-paste" showLauncherIcon=true>
+                    <e-ribbon-collections>
+                        <e-ribbon-collection>
+                            <e-ribbon-items>
+                                <e-ribbon-item type="Button">
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                                <e-ribbon-item type="Button">
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-copy" content="Copy"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                                <e-ribbon-item type="Button">
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-format-painter" content="Format Painter"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                            </e-ribbon-items>
+                        </e-ribbon-collection>
+                    </e-ribbon-collections>
+                </e-ribbon-group>
+            </e-ribbon-groups>
+         </e-ribbon-tab>
+    </e-ribbon-tabs>
+    <e-ribbon-contextual-tabs>
+        <e-ribbon-contextual-tab>
+            <e-ribbon-tabs>
+                <e-ribbon-tab header="Arrange & View" id="ArrangeView">
+                    <e-ribbon-groups>
+                        <e-ribbon-group header="Arrange" showLauncherIcon=true>
+                            <e-ribbon-collections>
+                                <e-ribbon-collection>
+                                    <e-ribbon-items>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-bring-forward" content="Bring Forward"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-send-backward" content="Send Backward"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-show-hide-panel" content="Selection Pane"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                    </e-ribbon-items>
+                                </e-ribbon-collection>
+                            </e-ribbon-collections>
+                        </e-ribbon-group>
+                    </e-ribbon-groups>
+                </e-ribbon-tab>
+            </e-ribbon-tabs>
+        </e-ribbon-contextual-tab>
+    </e-ribbon-contextual-tabs>
+</ejs-ribbon>
+
+<script>
+    var ribbon;
+    function ribbonCreated () {
+        ribbon = document.getElementById('ribbon').ej2_instances[0];
+    }
+    document.getElementById('show-contextual').onclick = () => {
+      ribbon.showTab('ArrangeView', true);
+    }
+    document.getElementById('hide-contextual').onclick = () => {
+      ribbon.hideTab('ArrangeView', true);
+    }
+</script>
+
+<style>
+  #ribbon {
+    margin-top: 20px;
+  }
+</style>
diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/selected-tab/contextualtab.cs b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/selected-tab/contextualtab.cs
new file mode 100644
index 0000000000..c6a37a012e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/selected-tab/contextualtab.cs
@@ -0,0 +1,4 @@
+public ActionResult ContextualTab()
+{
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/selected-tab/razor b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/selected-tab/razor
new file mode 100644
index 0000000000..279c92caad
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/selected-tab/razor
@@ -0,0 +1,90 @@
+@using Syncfusion.EJ2.Ribbon
+@using Syncfusion.EJ2.Navigations
+
+@{
+  List<RibbonContextualTab> contextTabs = new List<RibbonContextualTab>()
+  {
+    new RibbonContextualTab
+    {
+      Visible = true,
+      IsSelected = true,
+      Tabs = new List<RibbonTab>()
+      {
+        new RibbonTab()
+        {
+          Header = "Styles" ,
+          Groups = new List<RibbonGroup>()
+          {
+            new RibbonGroup()
+            {
+              Header="Style",
+              ShowLauncherIcon=true,
+              Collections = new List<RibbonCollection>()
+              {
+                new RibbonCollection()
+                {
+                  Items = new List<RibbonItem>()
+                  {
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Style",
+                        IconCss = "e-icons e-style"
+                      }
+                    },
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Text Box",
+                        IconCss = "e-icons e-font-name"
+                      }
+                    },
+                    new RibbonItem()
+                    {
+                      Type = RibbonItemType.Button,
+                      ButtonSettings = new RibbonButtonSettings
+                      {
+                        Content = "Paint",
+                        IconCss = "e-icons e-paint-bucket"
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}
+
+@Html.EJS().Ribbon("ribbon").ContextualTabs(contextTabs).Tabs(tab =>
+{
+  tab.Header("Home").Groups(groups =>
+
+  {
+    groups.Header("Clipboard").GroupIconCss("e-icons e-paste").ShowLauncherIcon(true).Id("lipboardGroup").Collections(collection =>
+    {
+      collection.Items(items =>
+      {
+        items.Type(RibbonItemType.Button).ButtonSettings(button =>
+        {
+          button.IconCss("e-icons e-cut").Content("Cut");
+        }).Add();
+        items.Type(RibbonItemType.Button).ButtonSettings(button =>
+        {
+          button.IconCss("e-icons e-copy").Content("Copy");
+        }).Add();
+        items.Type(RibbonItemType.Button).ButtonSettings(button =>
+        {
+          button.IconCss("e-icons e-format-painter").Content("Format Painter");
+        }).Add();
+      }).Add();
+    }).Add();
+  }).Add();
+}).Render()
diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/selected-tab/tagHelper b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/selected-tab/tagHelper
new file mode 100644
index 0000000000..86f3e134f3
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/ribbon/contextual-tabs/selected-tab/tagHelper
@@ -0,0 +1,55 @@
+@using Syncfusion.EJ2.Ribbon
+@using Syncfusion.EJ2.Navigations
+
+<ejs-ribbon id="ribbon">
+     <e-ribbon-tabs>
+        <e-ribbon-tab header="Home">
+            <e-ribbon-groups>
+                <e-ribbon-group header="Clipboard" id="clipboardGroup" groupIconCss="e-icons e-paste" showLauncherIcon=true>
+                    <e-ribbon-collections>
+                        <e-ribbon-collection>
+                            <e-ribbon-items>
+                                <e-ribbon-item type="Button">
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                                <e-ribbon-item type="Button">
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-copy" content="Copy"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                                <e-ribbon-item type="Button">
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-format-painter" content="Format Painter"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                            </e-ribbon-items>
+                        </e-ribbon-collection>
+                    </e-ribbon-collections>
+                </e-ribbon-group>
+            </e-ribbon-groups>
+         </e-ribbon-tab>
+    </e-ribbon-tabs>
+    <e-ribbon-contextual-tabs>
+        <e-ribbon-contextual-tab visible=true isSelected=true>
+            <e-ribbon-tabs>
+                <e-ribbon-tab header="Styles">
+                    <e-ribbon-groups>
+                        <e-ribbon-group header="Style" showLauncherIcon=true>
+                            <e-ribbon-collections>
+                                <e-ribbon-collection>
+                                    <e-ribbon-items>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-style" content="Style"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-font-name" content="Text Box"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                        <e-ribbon-item type="Button">
+                                            <e-ribbon-buttonsettings iconCss="e-icons e-paint-bucket" content="Paint"></e-ribbon-buttonsettings>
+                                        </e-ribbon-item>
+                                    </e-ribbon-items>
+                                </e-ribbon-collection>
+                            </e-ribbon-collections>
+                        </e-ribbon-group>
+                    </e-ribbon-groups>
+                </e-ribbon-tab>
+            </e-ribbon-tabs>
+        </e-ribbon-contextual-tab>
+    </e-ribbon-contextual-tabs>
+</ejs-ribbon>
diff --git a/ej2-asp-core-mvc/ribbon/EJ2_ASP.MVC/contextual-tabs.md b/ej2-asp-core-mvc/ribbon/EJ2_ASP.MVC/contextual-tabs.md
new file mode 100644
index 0000000000..519e5478b5
--- /dev/null
+++ b/ej2-asp-core-mvc/ribbon/EJ2_ASP.MVC/contextual-tabs.md
@@ -0,0 +1,59 @@
+---
+layout: post
+title: Ribbon Contextual Tabs in ##Platform_Name## Ribbon Control | Syncfusion
+description: Checkout and learn about Ribbon Contextual Tabs in Syncfusion ##Platform_Name## Ribbon control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Ribbon
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Ribbon contextual tabs
+
+The Ribbon Contextual tabs are similar to the Ribbon tabs that are displayed on demand based on their needs, such as an image or a table tabs. It supports adding all built-in and custom ribbon items to perform specific actions.
+
+## Visible tabs
+
+You can utilize the [Visible](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Ribbon.RibbonContextualTab.html#Syncfusion_EJ2_Ribbon_RibbonContextualTab_Visible) property to control the visibility of each contextual tab.
+
+## Adding contextual tabs
+
+You can utilize the [ContextualTabs](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.ribbon.ribbon.html#Syncfusion_EJ2_Ribbon_Ribbon_ContextualTabs) property to add contextual tabs in the Ribbon. This property accepts an array of Ribbon tabs, where you can add multiple tabs based on your needs.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/ribbon/contextual-tabs/add-contextual-tab/razor %}
+{% endhighlight %}
+{% endtabs %}
+
+![ASP.NET MVC Ribbon Control with adding contextual tab](images/ribbon-contextualtab.png)
+
+## Selected tabs
+
+By using the [IsSelected](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Ribbon.RibbonContextualTab.html#Syncfusion_EJ2_Ribbon_RibbonContextualTab_IsSelected) property you can control the selected state of each contextual tab and indicates which tab is currently active.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/ribbon/contextual-tabs/selected-tab/razor %}
+{% endhighlight %}
+{% endtabs %}
+
+![ASP.NET MVC Ribbon Control with contextual tab selected](images/ribbon-contextualtab-selected.png)
+
+## Methods
+
+### Show tab
+
+You can use the `ShowTab` method to make the specific Contextual tab visible in the Ribbon.
+
+### Hide tab
+
+You can use the `HideTab` method to hide specific Contextual tab in the Ribbon.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/ribbon/contextual-tabs/method/razor %}
+{% endhighlight %}
+{% endtabs %}
+
+![ASP.NET MVC Ribbon Control with contextual tab method](images/ribbon-contextualtab-method.png)
diff --git a/ej2-asp-core-mvc/ribbon/EJ2_ASP.NETCORE/contextual-tabs.md b/ej2-asp-core-mvc/ribbon/EJ2_ASP.NETCORE/contextual-tabs.md
new file mode 100644
index 0000000000..f9165aeb27
--- /dev/null
+++ b/ej2-asp-core-mvc/ribbon/EJ2_ASP.NETCORE/contextual-tabs.md
@@ -0,0 +1,59 @@
+---
+layout: post
+title: Ribbon Contextual Tabs in ##Platform_Name## Ribbon Control | Syncfusion
+description: Checkout and learn about Ribbon Contextual Tabs in Syncfusion ##Platform_Name## Ribbon control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Ribbon
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Ribbon contextual tabs
+
+The Ribbon Contextual tabs are similar to the Ribbon tabs that are displayed on demand based on their needs, such as an image or a table tabs. It supports adding all built-in and custom ribbon items to perform specific actions.
+
+## Visible tabs
+
+You can utilize the [visible](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Ribbon.RibbonContextualTab.html#Syncfusion_EJ2_Ribbon_RibbonContextualTab_Visible) property to control the visibility of each contextual tab.
+
+## Adding contextual tabs
+
+You can utilize the `e-ribbon-contextual-tabs` tag directive to add contextual tabs in the Ribbon where you can add multiple tabs based on your needs.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/ribbon/contextual-tabs/add-contextual-tab/tagHelper %}
+{% endhighlight %}
+{% endtabs %}
+
+![ASP.NET Core Ribbon Control with adding contextual tab](./images/ribbon-contextualtab.png)
+
+## Selected tabs
+
+By using the [isSelected](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Ribbon.RibbonContextualTab.html#Syncfusion_EJ2_Ribbon_RibbonContextualTab_IsSelected) property you can control the selected state of each contextual tab and indicates which tab is currently active.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/ribbon/contextual-tabs/selected-tab/tagHelper %}
+{% endhighlight %}
+{% endtabs %}
+
+![ASP.NET Core Ribbon Control with contextual tab selected](./images/ribbon-contextualtab-selected.png)
+
+## Methods
+
+### Show tab
+
+You can use the `showTab` method to make the specific Contextual tab visible in the Ribbon.
+
+### Hide tab
+
+You can use the `hideTab` method to hide specific Contextual tab in the Ribbon.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/ribbon/contextual-tabs/method/tagHelper %}
+{% endhighlight %}
+{% endtabs %}
+
+![ASP.NET Core Ribbon Control with contextual tab method](./images/ribbon-contextualtab-method.png)
diff --git a/ej2-asp-core-mvc/ribbon/images/ribbon-contextualtab-method.png b/ej2-asp-core-mvc/ribbon/images/ribbon-contextualtab-method.png
new file mode 100644
index 0000000000..6058f944e2
Binary files /dev/null and b/ej2-asp-core-mvc/ribbon/images/ribbon-contextualtab-method.png differ
diff --git a/ej2-asp-core-mvc/ribbon/images/ribbon-contextualtab-selected.png b/ej2-asp-core-mvc/ribbon/images/ribbon-contextualtab-selected.png
new file mode 100644
index 0000000000..2aa488ca5e
Binary files /dev/null and b/ej2-asp-core-mvc/ribbon/images/ribbon-contextualtab-selected.png differ
diff --git a/ej2-asp-core-mvc/ribbon/images/ribbon-contextualtab.png b/ej2-asp-core-mvc/ribbon/images/ribbon-contextualtab.png
new file mode 100644
index 0000000000..f1c5c64354
Binary files /dev/null and b/ej2-asp-core-mvc/ribbon/images/ribbon-contextualtab.png differ