Skip to main content

Tab Header Position

By default the tab bar sits at the top of each group. You can change this to bottom, left, or right, either as a global default for all groups or per group at runtime.

Global Default​

Set defaultHeaderPosition in the component options to apply a position to all groups:

Per-Group at Runtime​

Each group's API exposes setHeaderPosition and getHeaderPosition, allowing you to change the tab bar position on individual groups independently:

const onReady = (event: DockviewReadyEvent) => {
    const panel = event.api.addPanel({
        id: 'panel_1',
        component: 'default',
        title: 'Panel 1',
    });

    // Move the tab bar to the left for this specific group
    panel.group.api.setHeaderPosition('left');

    // Read it back
    const position = panel.group.api.getHeaderPosition(); // 'left'
};

Live Example​