Skip to main content

Tabs

This section describes how to implement custom tab renderers

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
'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.

ModeBehavior
'default'Tabs swap positions instantly on drop — the original behavior.
'smooth'Tabs slide smoothly to open a gap for the dragged tab, similar to browser tabs.

Tab Height​

Tab height can be controlled through CSS.

Newsletter