Ribbon contextual tabs

19 Mar 202424 minutes to read

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 property to control the visibility of each contextual tab.

Adding contextual tabs

You can utilize the 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.

CSHTML

@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()

Selected tabs

By using the IsSelected property you can control the selected state of each contextual tab and indicates which tab is currently active.

CSHTML

@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()

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.

CSHTML

@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>