Skip to main content

Tabs

Each panel is represented by a tab in its group's header. Dockview ships a default tab renderer, and this page covers replacing or extending it: custom tab components, accessing panel parameters, context menus, full-width and reorder behaviour, and tab groups.

Register a tab component​

Default tab renderer​

Accessing custom panel parameters​

You can provide a generic type that matches the structure of the expected custom panels parameters to provide type-hints for the panel parameters which can be accessed via the params option.

Extend the default tab implementation​

If you only want to make minor changes to the tab rendering you may be able to use the default implementation as a base. This could include:

  • Hiding the close button
  • Attaching additional event listeners

The example below shows a custom tab renderer that displays the panel title alongside a live-updating parameter value.

Tab context menu​

Right-clicking a tab can show a context menu. This is opt-in; no menu is shown unless getTabContextMenuItems is provided. Return an empty array to suppress the menu for specific panels.

Built-in items​

Pass string shortcuts to render standard menu entries without any extra code:

ValueBehaviour
'close'Close the right-clicked panel
'closeOthers'Close every other panel in the same group
'closeAll'Close all panels in the group
'closeLeft'Close the panels to the left of the right-clicked panel (disabled when it is the first tab)
'closeRight'Close the panels to the right of the right-clicked panel (disabled when it is the last tab)
'maximize'Maximize the group. Renders as Restore when the group is already maximized, and is disabled for floating / popout panels that cannot be maximized
'float'Move the panel into a floating window (disabled when it is already floating)
'popout'Move the panel into a new browser window (disabled when it is already popped out)
'separator'Render a visual divider

Custom label items​

Provide an object with a label and action to add a simple clickable entry:

getTabContextMenuItems: (params) => [
    { label: 'Log panel id', action: () => console.log(params.panel.id) },
    { label: 'Disabled entry', action: () => {}, disabled: true },
]

Custom component items​

For richer UI, provide a framework component via the component field. The component receives panel, group, api, close, and an optional componentProps object.

Full width tab​

When a group has only one single tab you may want that tab to take the full width.

Tab reorder mode​

Controls how tabs animate when reordered via drag and drop.

ModeBehaviour
'default'Tabs swap positions instantly on drop; the original behaviour.
'smooth'Tabs slide smoothly to open a gap for the dragged tab, similar to browser tabs.
tabAnimation
Controls tab drag-and-drop reorder animation style. - "smooth": tabs animate smoothly during drag-and-drop reorder. They slide apart to reveal the insertion gap, then animate to their final positions on drop (Chrome-like behavior). - "default": standard tab reorder behavior without animation. Defaults to "default".
tabAnimation?: TabAnimation

Tab groups​

Tab groups let you visually organise tabs within a group using coloured chips, with a custom colour palette, chip renderers, context menus, and serialization.

See Tab groups for the full guide.

Tab height​

Tab height can be controlled through CSS.

:root {
    --dv-tabs-and-actions-container-height: 35px;
}

See also​