Context menusEnterprise

Dockview can show a context menu when you right-click a tab or a tab group chip. Menus are opt-in: nothing is shown unless you supply a builder function. Each builder returns a list mixing built-in string shortcuts with your own custom items.

Context menus are an enterprise feature, available in the dockview-enterprise package. Importing dockview-enterprise enables them for every Dockview instance in the process. Without it, getTabContextMenuItems and getTabGroupChipContextMenuItems are ignored and no menu appears.

Tab context menu

Provide getTabContextMenuItems to build the menu shown when a tab is right-clicked. It receives the panel, its group, the DockviewApi and the originating MouseEvent, and returns the items to render. Return an empty array to suppress the menu for a specific tab.

Built-in items

Pass string shortcuts to render standard entries without writing any handlers. Each item wires itself to the panel and group from the builder's params:

Value	Behaviour
'close'	Close this panel
'closeOthers'	Close every other panel in the group
'closeAll'	Close every panel in the group
'closeLeft'	Close the panels before this one in the tab strip
'closeRight'	Close the panels after this one in the tab strip
'maximize'	Maximize the group. Renders as Restore and disables for non-grid panels, tracking the live state
'float'	Move the panel into a floating group. Disabled when the panel is already floating
'popout'	Move the panel into a new browser window. Disabled when already popped out
'pin'	Toggle the panel's pinned state. Renders as Pin tab / Unpin tab (see Pinned tabs)
'separator'	Render a visual divider

getTabContextMenuItems: (params) => [
    'close',
    'closeOthers',
    'closeAll',
    'separator',
    'maximize',
    'popout',
];

Custom label items

Return an object with a label and an action for a simple clickable entry. The action runs when the item is chosen; the menu then closes on its own.

getTabContextMenuItems: (params) => [
    'close',
    'separator',
    {
        label: 'Log panel id',
        action: () => console.log(params.panel.id),
    },
    {
        label: 'Float tab',
        action: () => params.api.addFloatingGroup(params.panel),
    },
];

Set disabled: true to render an item greyed out and non-interactive:

{
    label: 'Close',
    action: () => params.panel.api.close(),
    disabled: params.api.panels.length === 1,
}

Custom component items

For richer entries, render your own framework component instead of a plain label. The component receives the panel, group, api and a close callback through IContextMenuItemComponentProps; call close() when you are done to dismiss the menu.

api	api: DockviewApi
close	Call to close the context menu close: (): void
componentProps	componentProps?: object
group	group: DockviewGroupPanel
panel	panel: IDockviewPanel

Pass extra data to a component item with componentProps. How your component reads it depends on the framework, matching how that framework surfaces the other renderer props:

• React: a direct prop, props.componentProps.
• Vue: nested under the single params prop, params.componentProps (the same place params.api, params.panel and the rest live).
• Angular: a @Input() componentProps on the component.

Raw element items

To render custom content without a framework component, hand over a DOM node with the element field. Dockview embeds it as-is:

const el = document.createElement('div');
el.className = 'dv-context-menu-item';
el.textContent = 'Custom item';

getTabContextMenuItems: (params) => ['close', 'separator', { element: el }];

Chip context menu

Provide getTabGroupChipContextMenuItems to build the menu shown when a tab group chip is right-clicked. It receives the tab group, its group, the DockviewApi and the MouseEvent, and returns the items. As with tabs, return an empty array to suppress the menu for a specific chip.

Built-in chip items

Value	Behaviour
'rename'	An inline text input to rename the tab group
'colorPicker'	A grid of colour swatches to change the tab group colour
'collapse'	Collapse the tab group. Renders as Expand when already collapsed
'close'	Close every panel belonging to the tab group
'separator'	Render a visual divider

Custom label, component and element items work the same way as for tabs:

getTabGroupChipContextMenuItems: (params) => [
    'rename',
    'colorPicker',
    'separator',
    {
        label: 'Dissolve group',
        action: () =>
            params.api.dissolveTabGroup({
                groupId: params.group.id,
                tabGroupId: params.tabGroup.id,
            }),
    },
];

A component item on the chip menu receives IChipContextMenuItemComponentProps. It mirrors the tab menu's IContextMenuItemComponentProps but carries the tabGroup the chip represents in place of a single panel, since a chip spans several panels. The group, api, close and componentProps fields are the same, surfaced per framework as described above for tabs.

See Tab groups for the full chip API.

Suppressing the menu

Both builders are called on every right-click. Return an empty array to skip the menu in specific cases while keeping it for the rest:

getTabContextMenuItems: (params) =>
    params.panel.api.isActive ? ['close', 'separator', 'maximize'] : [];

Omitting the builder entirely disables the menu everywhere and lets the native browser context menu through.

When pinnedTabs is enabled (and pinnedTabs.contextMenuItem is left at its default), a built-in 'pin' item is prepended to the tab menu automatically, so the menu still opens even when the builder returns an empty array or is omitted. Set pinnedTabs.contextMenuItem: false to drop it and restore full suppression. This applies to the tab menu only; the chip menu is unaffected.