Skip to main content

Keyboard Navigation

Looking for built-in keyboard shortcuts? Dockview ships a rebindable keymap (tab switching, F6 / spatial group focus, Ctrl+M docking) behind the keyboardNavigation option — see Accessibility. This page covers the programmatic focus API for building your own handlers.

Programmatic Focus Navigation​

DockviewApi provides two methods for moving focus between panels and groups programmatically, useful for building keyboard shortcut handlers:

// Move focus to the next panel or group
api.moveToNext({ includePanel: true });

// Move focus to the previous panel or group
api.moveToPrevious({ includePanel: true });

Both accept an optional options object:

OptionTypeDescription
includePanelbooleanIf true, cycles through individual panels within groups. If false (default), cycles through groups only.
groupDockviewGroupPanelScope navigation to start from a specific group.
// Cycle only through groups (not individual panels within them)
api.moveToNext();

// Cycle through all panels across all groups
api.moveToNext({ includePanel: true });

Spatial Navigation​

moveToNext / moveToPrevious cycle through groups in list order. To navigate by visual direction instead, adjacentGroupInDirection returns the nearest grid group to the left, right, above, or below a given group (by comparing their centre points). Floating and popout groups are ignored, and it returns undefined when there is no group in that direction.

const left = api.adjacentGroupInDirection(api.activeGroup, 'left');
if (left) {
    left.focus();
}

Each group also exposes its rendered geometry, relative to the top-left of the dockview root, via group.api.boundingBox (undefined for popout groups). Combined with api.groups, this lets you build a custom spatial map or overview:

const layout = api.groups.map((group) => ({
    group,
    box: group.api.boundingBox,
}));

Live Example​

Newsletter