Ribbon Keytips in React Ribbon Component

29 Aug 202524 minutes to read

The Ribbon component supports KeyTips to provide keyboard navigation for its items. This feature can be enabled by setting the enableKeyTips property to true.

The keytips will be shown when the Alt + Windows/Command keys are pressed. This allows users to access any Ribbon element by pressing the corresponding keys.

Ribbon Item KeyTip

You can assign a KeyTip to any Ribbon item, including tabs, groups, and individual controls, using the keyTip property.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonGallery, RibbonGallerySettingsModel, RibbonItemSize, RibbonGroupButtonSelection, RibbonColorPicker, RibbonKeyTip } from '@syncfusion/ej2-react-ribbon';

function App() {
    let ribbonObj = React.useRef(null);

    const ribbonCreated = () => {
      ribbonObj.current?.ribbonKeyTipModule.showKeyTips('H');
    }
    const gallerySettings = (
      {
        itemCount: 3,
        groups: [{
          itemWidth: '100',
          header: 'Styles',
          items: [{
            content: 'Normal'
          }, {
            content: 'No Spacing'
          }, {
            content: 'Heading 1'
          }, {
            content: 'Heading 2'
          }, {
            content: 'Heading 3'
          }, {
            content: 'Heading 4'
          }, {
            content: 'Heading 5'
          }]
        }]
      }
  );
  
  const tableOptions = [{ text: "Insert Table" }, { text: "Draw Table" }, { text: "Convert Table" }, { text: "Excel SpreadSheet" }];
  const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  const fontSize = ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"];
  const fontStyle = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"];
  
  return (
      <div>
          <RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated}>
              <RibbonTabsDirective>
                  <RibbonTabDirective header='Home' keyTip='H'>
                      <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Clipboard" id="clipboard" keyTip='CD' groupIconCss="e-icons e-paste" showLauncherIcon={true}>
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="SplitButton" keyTip='PA' id="pastebtn" allowedSizes={RibbonItemSize.Large}
                                            splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" keyTip='CU' buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" keyTip='CO' buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" keyTip='CS' buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                        <RibbonGroupDirective header="Font" keyTip='FB' overflowHeader="More Font Options" groupIconCss="e-icons e-bold" isCollapsible={false} enableGroupOverflow={true} orientation="Row" cssClass='font-group'>
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="ComboBox" keyTip='O1' comboBoxSettings={{ dataSource: fontStyle, index: 3, label: 'Font Style', width: '115px', popupWidth: '150px', allowFiltering: true }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="ComboBox" keyTip='O2' comboBoxSettings={{ dataSource: fontSize, index: 3, label: 'Font Size', width: '65px', popupWidth: '85px', allowFiltering: true }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="GroupButton" keyTip='GB' allowedSizes={RibbonItemSize.Small} groupButtonSettings={{selection: RibbonGroupButtonSelection.Single, items: [{iconCss: 'e-icons e-bold', keyTip: '1', content: 'Bold', selected: true}, {iconCss: 'e-icons e-italic', keyTip: '2', content: 'Italic'}, {iconCss: 'e-icons e-underline', keyTip: '3', content: 'Underline'}, {iconCss: 'e-icons e-strikethrough', keyTip: '4', content: 'Strikethrough'},{iconCss: 'e-icons e-change-case', keyTip: '5', content: 'Change Case'}]}}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="ColorPicker" keyTip='CP' allowedSizes={RibbonItemSize.Small} colorPickerSettings={{value: '#123456'}}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                        <RibbonGroupDirective header="Gallery">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Gallery" keyTip='GY' gallerySettings={gallerySettings} >
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                        <RibbonGroupDirective header="Tables" isCollapsible={false}>
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="DropDown" keyTip='T' allowedSizes={RibbonItemSize.Large} dropDownSettings={{ iconCss: "e-icons e-table", items: tableOptions, content: "Table" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                        <RibbonGroupDirective header="Show" isCollapsible={true}>
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="CheckBox" keyTip='R1' checkBoxSettings={{ label: "Ruler", checked: false }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="CheckBox" keyTip='R2' checkBoxSettings={{ label: "Gridlines", checked: false }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="CheckBox" keyTip='R3' checkBoxSettings={{ label: "Navigation Pane", checked: true }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                      </RibbonGroupsDirective>
                  </RibbonTabDirective>
              </RibbonTabsDirective>
              <Inject services={[RibbonGallery, RibbonColorPicker, RibbonKeyTip]} />
          </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, Inject, RibbonGallery, RibbonGallerySettingsModel, RibbonItemSize, RibbonGroupButtonSelection, RibbonColorPicker, RibbonKeyTip } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';

function App() {
    let ribbonObj = React.useRef<RibbonComponent>(null);

    const ribbonCreated = () => {
      ribbonObj.current.ribbonKeyTipModule.showKeyTips('H');
    };
    const gallerySettings: RibbonGallerySettingsModel = (
      {
        itemCount: 3,
        groups: [{
          itemWidth: '100',
          header: 'Styles',
          items: [{
            content: 'Normal'
          }, {
            content: 'No Spacing'
          }, {
            content: 'Heading 1'
          }, {
            content: 'Heading 2'
          }, {
            content: 'Heading 3'
          }, {
            content: 'Heading 4'
          }, {
            content: 'Heading 5'
          }]
        }]
      }
  );
  
  const tableOptions: ItemModel[] = [{ text: "Insert Table" }, { text: "Draw Table" }, { text: "Convert Table" }, { text: "Excel SpreadSheet" }];
  const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  const fontSize: string[] = ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"];
  const fontStyle: string[] = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"];
  
  return (
      <div>
          <RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated}>
              <RibbonTabsDirective>
                  <RibbonTabDirective header='Home' keyTip='H'>
                      <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Clipboard" id="clipboard" keyTip='CD' groupIconCss="e-icons e-paste" showLauncherIcon={true}>
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="SplitButton" keyTip='PA' id="pastebtn" allowedSizes={RibbonItemSize.Large}
                                            splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Button" keyTip='CU' buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" keyTip='CO' buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="Button" keyTip='CS' buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                        <RibbonGroupDirective header="Font" keyTip='FB' overflowHeader="More Font Options" groupIconCss="e-icons e-bold" isCollapsible={false} enableGroupOverflow={true} orientation="Row" cssClass='font-group'>
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="ComboBox" keyTip='O1' comboBoxSettings={{ dataSource: fontStyle, index: 3, label: 'Font Style', width: '115px', popupWidth: '150px', allowFiltering: true }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="ComboBox" keyTip='O2' comboBoxSettings={{ dataSource: fontSize, index: 3, label: 'Font Size', width: '65px', popupWidth: '85px', allowFiltering: true }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="GroupButton" keyTip='GB' allowedSizes={RibbonItemSize.Small} groupButtonSettings={{selection: RibbonGroupButtonSelection.Single, items: [{iconCss: 'e-icons e-bold', keyTip: '1', content: 'Bold', selected: true}, {iconCss: 'e-icons e-italic', keyTip: '2', content: 'Italic'}, {iconCss: 'e-icons e-underline', keyTip: '3', content: 'Underline'}, {iconCss: 'e-icons e-strikethrough', keyTip: '4', content: 'Strikethrough'},{iconCss: 'e-icons e-change-case', keyTip: '5', content: 'Change Case'}]}}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="ColorPicker" keyTip='CP' allowedSizes={RibbonItemSize.Small} colorPickerSettings={{value: '#123456'}}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                        <RibbonGroupDirective header="Gallery">
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="Gallery" keyTip='GY' gallerySettings={gallerySettings} >
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                        <RibbonGroupDirective header="Tables" isCollapsible={false}>
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="DropDown" keyTip='T' allowedSizes={RibbonItemSize.Large} dropDownSettings={{ iconCss: "e-icons e-table", items: tableOptions, content: "Table" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                        <RibbonGroupDirective header="Show" isCollapsible={true}>
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="CheckBox" keyTip='R1' checkBoxSettings={{ label: "Ruler", checked: false }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="CheckBox" keyTip='R2' checkBoxSettings={{ label: "Gridlines", checked: false }}>
                                        </RibbonItemDirective>
                                        <RibbonItemDirective type="CheckBox" keyTip='R3' checkBoxSettings={{ label: "Navigation Pane", checked: true }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                      </RibbonGroupsDirective>
                  </RibbonTabDirective>
              </RibbonTabsDirective>
              <Inject services={[RibbonGallery, RibbonColorPicker, RibbonKeyTip]} />
          </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%;
}

File Menu KeyTip

A KeyTip can be assigned to the File Menu button using the keyTip property within the fileMenuSettings.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';

function App() {

    let ribbonObj = React.useRef(null);

    const ribbonCreated = () => {
        ribbonObj.current?.ribbonKeyTipModule.showKeyTips();
      }
     
    const fileOptions = [
    { text: "New", iconCss: "e-icons e-file-new", id: "new" },
    { text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
    { text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
    { text: "Save as", iconCss: "e-icons e-save", id: "save" }
    ]
    const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
    
    return (
        <div>
            <RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} fileMenu={{ visible: true, keyTip: 'F', menuItems: fileOptions}}>
                <RibbonTabsDirective>
                    <RibbonTabDirective header='Home'>
                        <RibbonGroupsDirective>
                          <RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
                              <RibbonCollectionsDirective>
                                  <RibbonCollectionDirective>
                                      <RibbonItemsDirective>
                                          <RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
                                              splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
                                          </RibbonItemDirective>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                                  <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>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                              </RibbonCollectionsDirective>
                          </RibbonGroupDirective>
                        </RibbonGroupsDirective>
                    </RibbonTabDirective>
                </RibbonTabsDirective>
                <Inject services={[RibbonFileMenu, RibbonKeyTip]} />
            </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, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
import { MenuItemModel } from '@syncfusion/ej2-navigations';

function App() {
  
    let ribbonObj = React.useRef<RibbonComponent>(null);

    const ribbonCreated = () => {
        ribbonObj.current.ribbonKeyTipModule.showKeyTips();
    };
    const fileOptions: MenuItemModel[] = [
    { text: "New", iconCss: "e-icons e-file-new", id: "new" },
    { text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
    { text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
    { text: "Save as", iconCss: "e-icons e-save", id: "save" }
    ];
    const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
    
    return (
        <div>
            <RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} fileMenu={{ visible: true, keyTip: 'F', menuItems: fileOptions}}>
                <RibbonTabsDirective>
                    <RibbonTabDirective header='Home'>
                        <RibbonGroupsDirective>
                          <RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
                              <RibbonCollectionsDirective>
                                  <RibbonCollectionDirective>
                                      <RibbonItemsDirective>
                                          <RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
                                              splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
                                          </RibbonItemDirective>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                                  <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>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                              </RibbonCollectionsDirective>
                          </RibbonGroupDirective>
                        </RibbonGroupsDirective>
                    </RibbonTabDirective>
                </RibbonTabsDirective>
                <Inject services={[RibbonFileMenu, RibbonKeyTip]} />
            </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%;
}

Backstage Menu KeyTip

You can assign KeyTips to Backstage menu items by defining the keyTip property for each item in the Backstage configuration.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, RibbonBackstage } from '@syncfusion/ej2-react-ribbon';
function App() {

    let ribbonObj = React.useRef(null);

    const ribbonCreated = () => {
        ribbonObj.current?.ribbonKeyTipModule.showKeyTips('F');
      }
      const backstageSettings = {
        visible: true,
        keyTip: 'F',
        items: [
            { id: 'home', keyTip: 'H', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
            { id: 'new', keyTip: 'N', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
            { id: 'open', keyTip: 'O', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() }
        ],
        backButton: {
            text: 'Close',
        }
    }
    const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
    function homeContentTemplate () {
        return "<div id='home-wrapper' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div><div id='block-wrapper'><div class='section-title'> Recent </div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td><span style='display: block; font-size: 14px'> Ribbon.docx </span><span style='font-size: 12px'> EJ2 >> Components >> Navigations >> Ribbon >> default </span></td></tr></tbody></table></div></div></div>"
    }
    
    function newContentTemplate () {
        return (
            "<div id='new-content' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div></div> "
        )
    }
    
    function openContentTemplate () {
        return (
            "<div style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td><span style='display: block; font-size: 14px'> Open in Desktop App </span><span style='font-size: 12px'> Use the full functionality of Ribbon </span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-protect-sheet'></span> </td><td><span style='display: block; font-size: 14px'> Protect Document </span><span style='font-size: 12px'>To prevent accidental changes, this document has been set to open as view-only.</span></td></tr></tbody></table></div></div>"
        )
    }
    
    return (
        <div>
            <RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} backStageMenu={backstageSettings}>
                <RibbonTabsDirective>
                    <RibbonTabDirective header='Home'>
                        <RibbonGroupsDirective>
                          <RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
                              <RibbonCollectionsDirective>
                                  <RibbonCollectionDirective>
                                      <RibbonItemsDirective>
                                          <RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
                                              splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
                                          </RibbonItemDirective>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                                  <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>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                              </RibbonCollectionsDirective>
                          </RibbonGroupDirective>
                        </RibbonGroupsDirective>
                    </RibbonTabDirective>
                </RibbonTabsDirective>
                <Inject services={[RibbonBackstage, RibbonKeyTip]} />
            </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, Inject, RibbonItemSize, RibbonKeyTip, BackStageMenuModel, RibbonBackstage } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';

function App() {
  
    let ribbonObj = React.useRef<RibbonComponent>(null);

    const ribbonCreated = () => {
      ribbonObj.current.ribbonKeyTipModule.showKeyTips('F');
    };
    const backstageSettings: BackStageMenuModel = {
      visible: true,
      keyTip: 'F',
      items: [
          { id: 'home', keyTip: 'H', text: 'Home', iconCss: 'e-icons e-home', content: homeContentTemplate() },
          { id: 'new', keyTip: 'N', text: 'New', iconCss: 'e-icons e-file-new', content: newContentTemplate() },
          { id: 'open', keyTip: 'O', text: 'Open', iconCss: 'e-icons e-folder-open', content: openContentTemplate() }
      ],
      backButton: {
          text: 'Close',
      }
  };
  const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  function homeContentTemplate () {
      return "<div id='home-wrapper' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div><div id='block-wrapper'><div class='section-title'> Recent </div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td><span style='display: block; font-size: 14px'> Ribbon.docx </span><span style='font-size: 12px'> EJ2 >> Components >> Navigations >> Ribbon >> default </span></td></tr></tbody></table></div></div></div>"
  }
  
  function newContentTemplate () {
      return (
          "<div id='new-content' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div></div> "
      )
  }
  
  function openContentTemplate () {
      return (
          "<div style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td><span style='display: block; font-size: 14px'> Open in Desktop App </span><span style='font-size: 12px'> Use the full functionality of Ribbon </span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-protect-sheet'></span> </td><td><span style='display: block; font-size: 14px'> Protect Document </span><span style='font-size: 12px'>To prevent accidental changes, this document has been set to open as view-only.</span></td></tr></tbody></table></div></div>"
      )
  }
  
  return (
      <div>
          <RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} backStageMenu={backstageSettings}>
              <RibbonTabsDirective>
                  <RibbonTabDirective header='Home'>
                      <RibbonGroupsDirective>
                        <RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
                            <RibbonCollectionsDirective>
                                <RibbonCollectionDirective>
                                    <RibbonItemsDirective>
                                        <RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
                                            splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
                                        </RibbonItemDirective>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                                <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>
                                    </RibbonItemsDirective>
                                </RibbonCollectionDirective>
                            </RibbonCollectionsDirective>
                        </RibbonGroupDirective>
                      </RibbonGroupsDirective>
                  </RibbonTabDirective>
              </RibbonTabsDirective>
              <Inject services={[RibbonBackstage, RibbonKeyTip]} />
          </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 Layout Switcher KeyTip

A KeyTip can be added to the layout switcher button using the layoutSwitcherKeyTip property.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';

function App() {

    let ribbonObj = React.useRef(null);

    const ribbonCreated = () => {
        ribbonObj.current?.ribbonKeyTipModule.showKeyTips();
      }
     
    const fileOptions = [
    { text: "New", iconCss: "e-icons e-file-new", id: "new" },
    { text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
    { text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
    { text: "Save as", iconCss: "e-icons e-save", id: "save" }
    ]
    const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
    
    return (
        <div>
            <RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} layoutSwitcherKeyTip='LS' created={ribbonCreated} fileMenu={{ visible: true, menuItems: fileOptions}}>
                <RibbonTabsDirective>
                    <RibbonTabDirective header='Home'>
                        <RibbonGroupsDirective>
                          <RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste">
                              <RibbonCollectionsDirective>
                                  <RibbonCollectionDirective>
                                      <RibbonItemsDirective>
                                          <RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
                                              splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
                                          </RibbonItemDirective>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                                  <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>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                              </RibbonCollectionsDirective>
                          </RibbonGroupDirective>
                        </RibbonGroupsDirective>
                    </RibbonTabDirective>
                </RibbonTabsDirective>
                <Inject services={[RibbonFileMenu, RibbonKeyTip]} />
            </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, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
import { MenuItemModel } from '@syncfusion/ej2-navigations';

function App() {
  
    let ribbonObj = React.useRef<RibbonComponent>(null);

    const ribbonCreated = () => {
        ribbonObj.current.ribbonKeyTipModule.showKeyTips();
    };
     
    const fileOptions: MenuItemModel[] = [
    { text: "New", iconCss: "e-icons e-file-new", id: "new" },
    { text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
    { text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
    { text: "Save as", iconCss: "e-icons e-save", id: "save" }
    ];
    const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
    
    return (
        <div>
            <RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} layoutSwitcherKeyTip='LS' created={ribbonCreated} fileMenu={{ visible: true, menuItems: fileOptions}}>
                <RibbonTabsDirective>
                    <RibbonTabDirective header='Home'>
                        <RibbonGroupsDirective>
                          <RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste">
                              <RibbonCollectionsDirective>
                                  <RibbonCollectionDirective>
                                      <RibbonItemsDirective>
                                          <RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
                                              splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
                                          </RibbonItemDirective>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                                  <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>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                              </RibbonCollectionsDirective>
                          </RibbonGroupDirective>
                        </RibbonGroupsDirective>
                    </RibbonTabDirective>
                </RibbonTabsDirective>
                <Inject services={[RibbonFileMenu, RibbonKeyTip]} />
            </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 Launcher Icon KeyTip

A KeyTip can be assigned to a group’s launcher icon using the launcherIconKeyTip property.

import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';

function App() {

    let ribbonObj = React.useRef(null);

    const ribbonCreated = () => {
        ribbonObj.current?.ribbonKeyTipModule.showKeyTips('H');
      }
     
    const fileOptions = [
    { text: "New", iconCss: "e-icons e-file-new", id: "new" },
    { text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
    { text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
    { text: "Save as", iconCss: "e-icons e-save", id: "save" }
    ]
    const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
    
    return (
        <div>
            <RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} fileMenu={{ visible: true, menuItems: fileOptions}}>
                <RibbonTabsDirective>
                    <RibbonTabDirective header='Home' keyTip='H'>
                        <RibbonGroupsDirective>
                          <RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true} launcherIconKeyTip='L'>
                              <RibbonCollectionsDirective>
                                  <RibbonCollectionDirective>
                                      <RibbonItemsDirective>
                                          <RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
                                              splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
                                          </RibbonItemDirective>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                                  <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>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                              </RibbonCollectionsDirective>
                          </RibbonGroupDirective>
                        </RibbonGroupsDirective>
                    </RibbonTabDirective>
                </RibbonTabsDirective>
                <Inject services={[RibbonFileMenu, RibbonKeyTip]} />
            </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, Inject, RibbonItemSize, RibbonKeyTip, RibbonFileMenu } from '@syncfusion/ej2-react-ribbon';
import { ItemModel } from '@syncfusion/ej2-splitbuttons';
import { MenuItemModel } from '@syncfusion/ej2-navigations';

function App() {
  
    let ribbonObj = React.useRef<RibbonComponent>(null);

    const ribbonCreated = () => {
        ribbonObj.current.ribbonKeyTipModule.showKeyTips('H');
    };
     
    const fileOptions: MenuItemModel[] = [
    { text: "New", iconCss: "e-icons e-file-new", id: "new" },
    { text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
    { text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
    { text: "Save as", iconCss: "e-icons e-save", id: "save" }
    ];
    const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
    
    return (
        <div>
            <RibbonComponent id='ribbon' ref={ribbonObj} enableKeyTips={true} created={ribbonCreated} fileMenu={{ visible: true, menuItems: fileOptions}}>
                <RibbonTabsDirective>
                    <RibbonTabDirective header='Home' keyTip='H'>
                        <RibbonGroupsDirective>
                          <RibbonGroupDirective header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true} launcherIconKeyTip='L'>
                              <RibbonCollectionsDirective>
                                  <RibbonCollectionDirective>
                                      <RibbonItemsDirective>
                                          <RibbonItemDirective type="SplitButton" id="pastebtn" allowedSizes={RibbonItemSize.Large}
                                              splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
                                          </RibbonItemDirective>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                                  <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>
                                      </RibbonItemsDirective>
                                  </RibbonCollectionDirective>
                              </RibbonCollectionsDirective>
                          </RibbonGroupDirective>
                        </RibbonGroupsDirective>
                    </RibbonTabDirective>
                </RibbonTabsDirective>
                <Inject services={[RibbonFileMenu, RibbonKeyTip]} />
            </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%;
}

Methods

Show keytips

Use the showKeyTips method to display the KeyTips dynamically. To navigate into a specific tab’s or group’s KeyTips, pass its KeyTip as an argument. For instance, showKeyTips('H') will show the KeyTips for all items under the element assigned the ‘H’ KeyTip.

Hide keyTips

Use the hideKeyTips method to hide all visible KeyTips on the Ribbon.

Guidelines for adding keytips

Before adding keytips to the ribbon items consider the following:

  • Avoid using the same keytip setting on multiple items.

For example: When you add the keytip text H or HF for the same items, it activates the first item occurrence of H, while any subsequent instances of H or HF are ignored.

  • Do not use the same first letter for the single and double keytip items.

For example: When accessing keytip text F, FP and FPF added for the different ribbon items and pressing F key, only the F key tip associated item will be activated while the FP, FPF configured ribbon items will be ignored.