Skip to main content

Advanced overflowEnterprise

The default overflow dropdown is a flat list of the tabs that no longer fit. Advanced overflow, an enterprise feature, upgrades that same dropdown, in place, into a command-palette style tab switcher: a search box that filters the group's tabs, most-recently-used ordering, and full keyboard navigation. The chevron trigger and the count badge are unchanged; only the popover body changes. Without dockview-enterprise the plain list renders exactly as before, so these fields are safe to leave set.

All three capabilities live on the shared overflow option.

maxRows
Wrap mode only: cap the number of header rows. The strip grows to at most maxRows rows; tabs that would land on a row beyond the cap spill into the overflow dropdown instead. Requires the MultiRowTabsModule. Default: unbounded (wrap grows to fit every tab).
maxRows?: number
mode
What happens when tabs don't fit. Default 'dropdown' (today's free path). 'wrap' requires the MultiRowTabsModule.
mode?: 'wrap' | 'dropdown'
mru
Order the dropdown by most-recently-activated. Reserved for AdvancedOverflowModule; ignored until present. Default: false.
mru?: boolean
search
Filter input over the group's tabs. Reserved for AdvancedOverflowModule; ignored until that module is present. Default: false.
search?: {
placeholder?: string,
scope?: 'group' | 'overflow'
} | boolean

Set overflow.search to add a filter input at the top of the dropdown. Typing filters the listed tabs by title as you type.

const api = createDockview(element, {
    overflow: { search: true },
});

Pass an object to tune the input:

  • scope: 'group' (the default) searches every tab in the group, so the dropdown becomes a switcher for the whole group, not just the clipped tabs. 'overflow' restricts the filter to the tabs that are actually hidden behind the chevron.
  • placeholder: the input's placeholder text. Defaults to "Search tabs".
const api = createDockview(element, {
    overflow: {
        search: { scope: 'overflow', placeholder: 'Filter hidden tabs' },
    },
});

Most-recently-used ordering​

Set overflow.mru to order the dropdown by most-recently-activated instead of the tabs' position in the strip, so the tab you last looked at sits at the top. Recency is tracked per group and survives a group closing; moving a panel between groups re-homes its recency.

const api = createDockview(element, {
    overflow: { search: true, mru: true },
});

Keyboard navigation​

The popover is a role="listbox" with a roving focus:

  • Arrow keys move between rows; Home / End jump to the first / last row.
  • Enter activates the focused tab and closes the popover.
  • Esc closes the popover and returns focus to the chevron button.
  • Tab is trapped inside the popover while it is open.

With search enabled the input takes focus when the popover opens, so you can type to filter and then arrow into the results without touching the mouse.

Pinned tabs in the dropdown​

When pinned tabs are enabled and the pinned block itself overflows the strip, the clipped pinned tabs appear in a dedicated Pinned section at the top of the dropdown, above the search and most-recently-used list, and are counted in the chevron badge. This matches the plain dropdown, which shows the same section without dockview-enterprise.

See also​

  • Tab overflow: the default dropdown this feature upgrades.
  • Multi-row tabs: wrap tabs onto extra rows instead of collapsing them.
  • Pinned tabs: the source of the dropdown's "Pinned" section.