Ribbon contextual tabs

21 Mar 202418 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.ts
index.html
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonItemSize, RibbonContextualTab, RibbonContextualTabSettingsModel } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonContextualTab);

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

let contextualTabs: RibbonContextualTabSettingsModel = {
  visible: true,
  tabs: [{
    id: "ShapeFormat",
    header: "Shape Format",
    groups: [{
      showLauncherIcon: true,
      header: "Text decoration",
      collections: [{
        items: [
          { type: RibbonItemType.Button, buttonSettings: { iconCss: "e-icons e-text-header", content: "Text Header" } },
          { type: RibbonItemType.Button, buttonSettings: { iconCss: "e-icons e-text-wrap", content: "Text Wrap" } },
          { type: RibbonItemType.Button, buttonSettings: { iconCss: "e-icons e-text-annotation", content: "Text Annotation" } },
        ]
      }]
    },{
      header: "Accessibility",
      collections: [{
        items: [
          { type: RibbonItemType.Button, allowedSizes: RibbonItemSize.Large, buttonSettings: { iconCss: "e-icons e-text-alternative", content: "Alt Text" } },
        ]
      }]
    },{
      showLauncherIcon: true,
      header: "Arrange",
      collections: [{
        items: [
          { type: RibbonItemType.Button, buttonSettings: { iconCss: "e-icons e-bring-forward", content: "Bring Forward" } },
          { type: RibbonItemType.Button, buttonSettings: { iconCss: "e-icons e-send-backward", content: "Send Backward" } },
          { type: RibbonItemType.Button, buttonSettings: { iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" } },
        ]
      }]
    }]
  }]
};

let ribbon: Ribbon = new 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/25.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-ribbon/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="ribbon"></div>
    </div>
</body>

<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

</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.ts
index.html
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonContextualTab, RibbonContextualTabSettingsModel } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonContextualTab);

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

let contextualTabs: RibbonContextualTabSettingsModel = {
  visible: true,
  isSelected: true,
  tabs: [{
    header: "Styles",
    groups: [{
      showLauncherIcon: true,
      header: "Style",
      collections: [{
        items: [
          { type: RibbonItemType.Button, buttonSettings: { iconCss: "e-icons e-style", content: "Style" } },
          { type: RibbonItemType.Button, buttonSettings: { iconCss: "e-icons e-font-name", content: "Text Box" } },
          { type: RibbonItemType.Button, buttonSettings: { iconCss: "e-icons e-paint-bucket", content: "Paint" } },
        ]
      }]
    }]
  }]
};

let ribbon: Ribbon = new 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/25.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-ribbon/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="ribbon"></div>
    </div>
</body>

<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

</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.ts
index.html
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonContextualTab, RibbonContextualTabSettingsModel } from "@syncfusion/ej2-ribbon";

Ribbon.Inject(RibbonContextualTab);

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

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

let ribbon: Ribbon = new Ribbon({
    tabs: ribbonTabs,
    contextualTabs: [contextualTabs]
});
ribbon.appendTo("#ribbon");

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

(document.getElementById('hide-contextual') as HTMLElement).onclick = () => {
  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/25.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-ribbon/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <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>
</body>

<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

</html>