Ribbon contextual tabs
28 Aug 202524 minutes to read
Ribbon Contextual Tabs are special tabs that appear only when a specific object or context is selected, such as a table, image, or chart. They provide users with a set of tools relevant only to the selected item. These tabs can host all built-in and custom Ribbon items to perform specific actions.
Visible tabs
You can control the initial visibility of a contextual tab by setting the visible property to true or false within the e-ribbon-contextual-tab directive.
Adding Contextual Tabs
Add contextual tabs to the Ribbon by using the RibbonContextualTabsDirective. You can define multiple contextual tabs, each containing one or more standard Ribbon tabs.
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";
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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Accessibility">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Large} buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Arrange" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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";
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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Accessibility">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Large} buttonSettings=>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Arrange" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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
The isSelected property determines which contextual tab is active upon initialization. Setting this property to true makes the corresponding tab the currently selected one.
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";
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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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";
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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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
The Ribbon provides methods to dynamically manage the visibility of contextual tabs after the component has been initialized.
Show Tab
The showTab method makes a specific contextual tab visible in the Ribbon.
Hide Tab
The hideTab method hides a 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, Inject } 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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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 { 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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings=>
</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;
}