Ribbon contextual tabs

21 Mar 202415 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.

index.js
index.html
var ribbonTabs = [{
  header: "Home",
  groups: [{
    showLauncherIcon: true,
    header: "Clipboard",
    groupIconCss: "e-icons e-paste",
    id: "clipboardGroup",
    collections: [{
      items: [
        { type: "Button", buttonSettings: { iconCss: "e-icons e-cut", content: "Cut", } },
        { type: "Button", buttonSettings: { iconCss: "e-icons e-copy", content: "Copy" } },
        { type: "Button", buttonSettings: { iconCss: "e-icons e-format-painter", content: "Format Painter" } }
      ]
    }]
  }]
}];
var contextualTabs = {
  visible: true,
  tabs: [{
    id: "ShapeFormat",
    header: "Shape Format",
    groups: [{
      showLauncherIcon: true,
      header: "Text decoration",
      collections: [{
        items: [
          { type: "Button", buttonSettings: { iconCss: "e-icons e-text-header", content: "Text Header" } },
          { type: "Button", buttonSettings: { iconCss: "e-icons e-text-wrap", content: "Text Wrap" } },
          { type: "Button", buttonSettings: { iconCss: "e-icons e-text-annotation", content: "Text Annotation" } },
        ]
      }]
    },{
      header: "Accessibility",
      collections: [{
        items: [
          { type: "Button", allowedSizes: ej.ribbon.RibbonItemSize.Large, buttonSettings: { iconCss: "e-icons e-text-alternative", content: "Alt Text" } },
        ]
      }]
    },{
      showLauncherIcon: true,
      header: "Arrange",
      collections: [{
        items: [
          { type: "Button", buttonSettings: { iconCss: "e-icons e-bring-forward", content: "Bring Forward" } },
          { type: "Button", buttonSettings: { iconCss: "e-icons e-send-backward", content: "Send Backward" } },
          { type: "Button", buttonSettings: { iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" } },
        ]
      }]
    }]
  }]
};

var ribbon = new ej.ribbon.Ribbon({
  tabs: ribbonTabs,
  contextualTabs: [contextualTabs]
});

ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">

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

<body>

    <div id="container">
        <div id="ribbon"></div>
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Selected tabs

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

index.js
index.html
var ribbonTabs = [{
  header: "Home",
  groups: [{
    showLauncherIcon: true,
    header: "Clipboard",
    groupIconCss: "e-icons e-paste",
    id: "clipboardGroup",
    collections: [{
      items: [
        { type: "Button", buttonSettings: { iconCss: "e-icons e-cut", content: "Cut", } },
        { type: "Button", buttonSettings: { iconCss: "e-icons e-copy", content: "Copy" } },
        { type: "Button", buttonSettings: { iconCss: "e-icons e-format-painter", content: "Format Painter" } }
      ]
    }]
  }]
}];
var contextualTabs = {
  visible: true,
  isSelected: true,
  tabs: [{
    header: "Styles",
    groups: [{
      showLauncherIcon: true,
      header: "Style",
      collections: [{
        items: [
          { type: "Button", buttonSettings: { iconCss: "e-icons e-style", content: "Style" } },
          { type: "Button", buttonSettings: { iconCss: "e-icons e-font-name", content: "Text Box" } },
          { type: "Button", buttonSettings: { iconCss: "e-icons e-paint-bucket", content: "Paint" } },  
        ]
      }]
    }]
  }]
};

var ribbon = new ej.ribbon.Ribbon({
  tabs: ribbonTabs,
  contextualTabs: [contextualTabs]
});

ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">

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

<body>

    <div id="container">
        <div id="ribbon"></div>
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

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.

index.js
index.html
var ribbonTabs = [{
  header: "Home",
  groups: [{
    showLauncherIcon: true,
    header: "Clipboard",
    groupIconCss: "e-icons e-paste",
    id: "clipboardGroup",
    collections: [{
      items: [
        { type: "Button", buttonSettings: { iconCss: "e-icons e-cut", content: "Cut", } },
        { type: "Button", buttonSettings: { iconCss: "e-icons e-copy", content: "Copy" } },
        { type: "Button", buttonSettings: { iconCss: "e-icons e-format-painter", content: "Format Painter" } }
      ]
    }]
  }]
}];

var contextualTabs = {
  tabs: [{
    id: "ArrangeView",
    header: "Arrange & View",
    groups: [{
      showLauncherIcon: true,
      header: "Arrange",
      collections: [{
        items: [
          { type: "Button", buttonSettings: { iconCss: "e-icons e-bring-forward", content: "Bring Forward" } },
          { type: "Button", buttonSettings: { iconCss: "e-icons e-send-backward", content: "Send Backward" } },
          { type: "Button", buttonSettings: { iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" } },
        ]
      }]
    }]
  }]
};

var ribbon = new ej.ribbon.Ribbon({
  tabs: ribbonTabs,
  contextualTabs: [contextualTabs]
});

ribbon.appendTo("#ribbon");

document.getElementById('show-contextual').onclick = function() {
  ribbon.showTab('ArrangeView', true);
}

document.getElementById('hide-contextual').onclick = function() {
  ribbon.hideTab('ArrangeView', true);
}
<!DOCTYPE html>
<html lang="en">

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

<body>

    <div id="container">
        <button class="e-btn" id="show-contextual"> Show tab </button>
        <button class="e-btn" id="hide-contextual"> Hide tab </button>
        <!--Element to render the Timeline control-->
        <div id="ribbon" style="margin-top: 20px;"></div>
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>