Keyboard navigationEnterprise

Dockview can be driven entirely from the keyboard: switching tabs, moving focus between groups, and even docking a panel into a new position, all without a mouse. This page covers the built-in keymap and keyboard docking. For the accessibility semantics that back it (ARIA roles, screen-reader announcements, focus indicators), see Accessibility; for the programmatic focus APIs (activateNext, adjacentGroupInDirection, …), see Focus Navigation.

Enabling the keymap

Set keyboardNavigation to true to turn on the built-in bindings:

const options = {
    keyboardNavigation: true,
};

The keymap is rebindable: pass an object with a keymap to override individual keys. Unset keys keep their defaults:

const options = {
    keyboardNavigation: {
        keymap: {
            nextTab: 'ctrl+tab',
            prevTab: 'ctrl+shift+tab',
        },
    },
};

Each binding is a +-separated string, modifiers first. Recognised modifiers are ctrl, shift, alt, and meta (alias cmd); the final part is the KeyboardEvent.key to match, case-insensitively, for example 'ctrl+]', 'shift+f6', 'ctrl+tab'.

Moving between tabs and groups

Action	Default	Binding key
Switch to the next tab in the focused group	Ctrl+]	nextTab
Switch to the previous tab in the focused group	Ctrl+[	prevTab
Move focus to the next group	F6	focusNextGroup
Move focus to the previous group	Shift+F6	focusPrevGroup
Move focus from panel content to the tab strip	Ctrl+Shift+\	focusTabs
Move focus to the group in a direction	Ctrl+Shift+←/→/↑/↓	focusGroup{Left,Right,Up,Down}

F6 / Shift+F6 cycle the groups in list order. Ctrl+Shift+Arrows jump to the visually adjacent group instead, the same geometry used by the adjacentGroupInDirection API, so mouse and keyboard agree on what "the group to the left" is. Once focus lands on the tab strip (via Ctrl+Shift+\ or F6), the strip's own arrow-key navigation takes over. See Accessibility.

Keyboard docking

Press Ctrl+M to dock the active panel somewhere new without dragging. A live drop preview follows the current selection, and each step is announced to screen readers:

1. Pick a target group: arrow keys cycle through the groups (including the panel's own, so you can split a tab out of its group); Enter selects one.
2. Pick an edge: arrow keys choose a split edge (left / right / top / bottom), or the centre to tab into the group; Enter commits the move.

Esc steps back a phase, or cancels the move entirely from the first phase. From the target phase, Ctrl+Shift+F floats the panel into a new floating group instead of docking it.

While a move is armed, Dockview shows a visible on-screen hint mirroring the screen-reader narration, so sighted keyboard users can see how to proceed rather than relying on the announcement alone. It is an aria-hidden element (to avoid a double announcement) with the class .dv-keyboard-docking-hint, styleable through your theme, and is removed when the move commits or is cancelled.

Action	Default	Binding key
Arm keyboard docking of the active panel	Ctrl+M	dock
Float the moving panel (target phase)	Ctrl+Shift+F	float

These bindings live on the same keyboardNavigation.keymap object, so they can be rebound the same way as the navigation keys above.

Pinning the active tab

When pinned tabs are enabled, Ctrl+Shift+Enter pins or unpins the active panel's tab.

Action	Default	Binding key
Pin / unpin the active tab	Ctrl+Shift+Enter	togglePin

The binding is inert unless pinnedTabs.enabled is true. It lives on the same keyboardNavigation.keymap object, so it can be rebound like the others.

Keyboard docking works inside popout windows too. Arm and complete a move from within a popped-out group and the drop preview, announcements, and resulting focus all stay in that window.

For the programmatic focus APIs (activateNext, activatePrevious, adjacentGroupInDirection, …) that let you build your own keyboard handlers without the enterprise keymap, see Focus Navigation.