Ribbon contextual tabs
21 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 RibbonContextualTabsDirective to add contextual tabs in the Ribbon where you can add multiple tabs based on your needs.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonItemSize, RibbonContextualTab, RibbonContextualTabsDirective, RibbonContextualTabDirective } from "@syncfusion/ej2-react-ribbon";
function App() {
return (
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboardGroup" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<RibbonContextualTabsDirective>
<RibbonContextualTabDirective visible={true} >
<RibbonTabsDirective>
<RibbonTabDirective header='Shape Format' id="ShapeFormat">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Text decoration" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-text-header", content: "Text Header" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-text-wrap", content: "Text Wrap" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-text-annotation", content: "Text Annotation" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Accessibility">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Large} buttonSettings={{ iconCss: "e-icons e-text-alternative", content: "Alt Text" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Arrange" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-bring-forward", content: "Bring Forward" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-send-backward", content: "Send Backward" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonContextualTabDirective>
</RibbonContextualTabsDirective>
<Inject services={[RibbonContextualTab]} />
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonItemSize, RibbonContextualTab, RibbonContextualTabsDirective, RibbonContextualTabDirective, Inject } from "@syncfusion/ej2-react-ribbon";
import { ItemModel } from "@syncfusion/ej2-react-splitbuttons";
function App() {
return (
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboardGroup" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<RibbonContextualTabsDirective>
<RibbonContextualTabDirective visible={true} >
<RibbonTabsDirective>
<RibbonTabDirective header='Shape Format' id="ShapeFormat">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Text decoration" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-text-header", content: "Text Header" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-text-wrap", content: "Text Wrap" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-text-annotation", content: "Text Annotation" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Accessibility">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Large} buttonSettings={{ iconCss: "e-icons e-text-alternative", content: "Alt Text" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Arrange" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-bring-forward", content: "Bring Forward" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-send-backward", content: "Send Backward" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonContextualTabDirective>
</RibbonContextualTabsDirective>
<Inject services={[RibbonContextualTab]} />
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}Selected tabs
By using the isSelected property you can control the selected state of each contextual tab and indicates which tab is currently active.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonContextualTab, RibbonContextualTabsDirective, RibbonContextualTabDirective } from "@syncfusion/ej2-react-ribbon";
function App() {
return (
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboardGroup" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<RibbonContextualTabsDirective>
<RibbonContextualTabDirective visible={true} isSelected={true}>
<RibbonTabsDirective>
<RibbonTabDirective header='Styles'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Style" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-style", content: "Style" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-font-name", content: "Text Box" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paint-bucket", content: "Paint" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonContextualTabDirective>
</RibbonContextualTabsDirective>
<Inject services={[RibbonContextualTab]} />
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonContextualTab, RibbonContextualTabsDirective, RibbonContextualTabDirective, Inject } from "@syncfusion/ej2-react-ribbon";
import { ItemModel } from "@syncfusion/ej2-react-splitbuttons";
function App() {
return (
<RibbonComponent id='ribbon'>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboardGroup" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<RibbonContextualTabsDirective>
<RibbonContextualTabDirective visible={true} isSelected={true}>
<RibbonTabsDirective>
<RibbonTabDirective header='Styles'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Style" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-style", content: "Style" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-font-name", content: "Text Box" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-paint-bucket", content: "Paint" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonContextualTabDirective>
</RibbonContextualTabsDirective>
<Inject services={[RibbonContextualTab]} />
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}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.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonContextualTab, RibbonContextualTabsDirective, RibbonContextualTabDirective } from "@syncfusion/ej2-react-ribbon";
import { useRef } from 'react';
function App() {
let ribbonObj = useRef(null);
const showContextualTab = () => {
ribbonObj.current?.showTab('ArrangeView', true);
}
const hideContextualTab = () => {
ribbonObj.current?.hideTab('ArrangeView', true);
}
return (
<div>
<button className="e-btn" id="show-contextual" onClick={showContextualTab}> Show tab </button>
<button className="e-btn" id="hide-contextual" onClick={hideContextualTab}> Hide tab </button>
<RibbonComponent id='ribbon' ref={ribbonObj}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboardGroup" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<RibbonContextualTabsDirective>
<RibbonContextualTabDirective>
<RibbonTabsDirective>
<RibbonTabDirective id="ArrangeView" header="Arrange & View">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Arrange" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-bring-forward", content: "Bring Forward" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-send-backward", content: "Send Backward" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonContextualTabDirective>
</RibbonContextualTabsDirective>
<Inject services={[RibbonContextualTab]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonContextualTab, RibbonContextualTabsDirective, RibbonContextualTabDirective, Inject } from "@syncfusion/ej2-react-ribbon";
import { ItemModel } from "@syncfusion/ej2-react-splitbuttons";
import { useRef } from 'react';
function App() {
let ribbonObj = useRef<RibbonComponent>(null);
const showContextualTab = () => {
ribbonObj.current?.showTab('ArrangeView', true);
}
const hideContextualTab = () => {
ribbonObj.current?.hideTab('ArrangeView', true);
}
return (
<div>
<button className="e-btn" id="show-contextual" onClick={showContextualTab}> Show tab </button>
<button className="e-btn" id="hide-contextual" onClick={hideContextualTab}> Hide tab </button>
<RibbonComponent id='ribbon' ref={ribbonObj}>
<RibbonTabsDirective>
<RibbonTabDirective header='Home'>
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" id="clipboardGroup" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<RibbonContextualTabsDirective>
<RibbonContextualTabDirective>
<RibbonTabsDirective>
<RibbonTabDirective id="ArrangeView" header="Arrange & View">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Arrange" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-bring-forward", content: "Bring Forward" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-send-backward", content: "Send Backward" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonContextualTabDirective>
</RibbonContextualTabsDirective>
<Inject services={[RibbonContextualTab]} />
</RibbonComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#ribbon {
margin-top: 20px;
}