Tabs with Context Menu in TabStrip Component

Whenever a tab of IntegralUI TabStrip component is right-clicked, the browser context menu will appear by default. You can override this by creating a custom context menu that will appear on right-click over each tab header.

There is a sample code below written in JavaScript, Angular, React and Vue that shows how to add context menu to tabs.

In above demo, whenever tab header is right-clicked a custom context menu will pop up with several different options that allow you to add or remove tabs in the tab strip.

Following sections below contain sample code in JavaScript, Angular, React and Vue.

Create a Custom Context Menu for Tabs

At first, you need to create an object that holds menu specifications. Usually this object contains only a list of all menu options. In this example, the menu contains options for adding and removing tabs:

• JavaScript
• Angular
• React
• Vue

As a context menu you can use any custom HTML element that represents a menu or you can use the IntegralUI ContextMenu component. To add this component the TabStrip, you need to create custom template for the tab header. By default, tab header displays only its icon and title, so you can create a template in similar way with one difference, the icon and title will be encapsulated by the ContextMenu component. This will make sure, that whenever tab header is right-clicked, your context menu will pop up instead of standard menu from the browser.

• JavaScript
• Angular
• React
• Vue

Based on menu specifications set previously, when tab header is clicked using right-mouse button the options will appear.

You can create a different context menu for each tab separately. Using a condition based on tab object values (like id or key), you can determine which menu is applied. Furthermore, you can set some menu options to be disabled or hidden.

Dynamically Add/Remove Tabs using Menu Options

Currently, the context menu is not usable, it only shows a list of options. To make it active, you need to handle events when menu opens or an option is clicked. This example, shows how to handle menuOpening and menuClick events.

You can add or remove tabs using the menu. For this purpose, for each menu option you can add specific action. Depending on the clicked menu option, you can call a different method from code.

In this example, there are four menu options:

• Add Tab - will add a new tab at the end
• Insert Tab Before - will add a new tab before currently selected tab
• Insert Tab After - will add a new tab after currently selected tab
• Remove Tab - will remove the currently selected tab

Related: Add Remove Tabs in TabStrip Component

For each menu option, you need to add a unique identifier (the id or key field), which will allow you to make a distinction and determine which option is clicked. When menu item is clicked, the menuClick event is fired. You can handle this event and add your operations:

• JavaScript
• Angular
• React
• Vue

Handling the menuOpening event allows you to select the tab before context menu appear.

To simplify the example, we were using the same context menu for all tabs. However, you can add a different menu to each tab separately. In similar way, you can add a context menu to the TabStrip as a whole.

Conclusion

Adding a custom context menu to tabs in IntegralUI TabStrip component is simple. You need to create a template for the tab header and place the ContextMenu component with previously set menu settings. Whenever a menu option is clicked, you can apply a different action in your code by handling context menu events. You can have a different menu for each tab separately, based on conditions set in your code.

IntegralUI Web is a suite of native web components that includes the TabStrip. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.