Define KeyTips for the ribbon controls of an Office Add-in

05/29/2026

This sample shows how to define KeyTips for custom ribbon controls of an Office Add-in that uses the unified manifest for Microsoft 365. KeyTips, also known as sequential key shortcuts or access keys, appear around the ribbon controls when Alt is pressed. They enable keyboard-based navigation of the ribbon, making the user experience more accessible and efficient.

In this sample, a custom ribbon tab named Contoso KeyTips contains buttons and menus to select a color option for the following host-specific actions.

Excel: Changes the color of the selected cell.
PowerPoint: Inserts a text box with a fill.
Word: Inserts colored text.

Each tab, button, and menu is assigned a custom KeyTip in the manifest.

To learn more about custom KeyTips for Office Add-ins, see Add custom KeyTips to your Office Add-ins.

Applies to

Custom KeyTips are supported in Excel, PowerPoint, and Word on the following platforms.

Web
Windows (Version 2603 (Build 19822.20000) and later)
Mac (Version 16.107 (Build 26030819) and later)

Prerequisites

Node.js (the latest LTS version).
Office connected to a Microsoft 365 subscription (including Office on the web). Get a free developer sandbox that provides a renewable 90-day Microsoft 365 E5 developer subscription.

Version history

Version	Date	Comments
1.0	05-28-2026	Initial release

Solution

Solution	Author(s)
Define KeyTips for the ribbon controls of an Office Add-in	Microsoft

Run the sample

Run this sample in Excel, Word, or PowerPoint. The add-in web files are served from https://localhost:3000 on your computer.

Clone or download this repository to your computer.
In a console or terminal, go to the root of the project folder Samples/office-keytips.
Run the following command to install dependencies.
```
npm install
```
Run the following command to start the local web server and sideload the add-in in Excel.
```
npm start
```
If you want to run the add-in on Word or PowerPoint, run one of the following commands instead.
```
npm run start:desktop:word
npm run start:desktop:powerpoint
```
Your preferred application opens and the add-in is sideloaded. When the add-in is sideloaded, the Contoso KeyTips tab appears on the ribbon.

Tip: To test the add-in on Office on the web, run the applicable command to sideload the add-in in your preferred desktop application. Once sideloaded, the add-in also appears on the web client.
Follow the steps in Try it out to test the sample.
To stop the web server, run the following command.
```
npm stop
```

Try the sample

In Excel, PowerPoint, or Word, press Alt.

KeyTips appear for each ribbon tab.
Press C then K to open the Contoso KeyTips tab.
With the Contoso KeyTips tab active, if the KeyTips have disappeared from the ribbon, press Alt+CK again. The KeyTips appear for the controls in the tab. Select the key for the color you want to apply to the host action.
- Red: R
- Orange: O
- Yellow: Y
- More colors: M
- Green: G
- Blue: B
- Purple: P

Key parts of the sample

Custom KeyTips are defined in the "keytip" property of each ribbon control in the manifest. The "keytip" property is supported for the following controls.

The following sample defines a KeyTip for the add-in's tab and button.

{
    "id": "ContosoKeyTipsTab",
    "label": "Contoso KeyTips",
    "keytip": "CK",
    "groups": [
        {
            "id": "KeyTipGroup1",
            "label": "Colors Group 1",
            ...
            "controls": [
                {
                    "id": "Btn1",
                    "type": "button",
                    "label": "Red",
                    ...
                    "actionId": "btn1Action",
                    "keytip": "R"
                }
            ]
        }
    ]
}

Additional resources

Questions and feedback

Did you experience any problems with the sample? Create an issue and we'll help you out.
We'd love to get your feedback about this sample. Go to our Office samples survey to give feedback and suggest improvements.
For general questions about developing Office Add-ins, go to Microsoft Q&A using the office-js-dev tag.

Copyright

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.