Skip to main content

SidebarPanelWidget

from v9.3

SidebarPanelWidget renders a slide-over panel anchored to the left or right edge of the deck overlay.

Usage​

import {ColumnPanel, MarkdownPanel} from '@deck.gl-community/panels';
import {SidebarPanelWidget} from '@deck.gl-community/widgets';

const inspectorPanel = new ColumnPanel({
  id: 'inspector',
  title: 'Inspector',
  panels: [
    new MarkdownPanel({
      id: 'details',
      title: 'Details',
      markdown: 'Persistent controls and context.'
    })
  ]
});

const widget = new SidebarPanelWidget({
  id: 'inspector-widget',
  panel: inspectorPanel,
  side: 'right'
});

Use SidebarPanelWidget for persistent controls, inspector panels, or other UI that should stay reachable while the user continues interacting with the visualization.

Import panel definitions from @deck.gl-community/panels and pass them to SidebarPanelWidget through panel.

Props​

type SidebarPanelWidgetProps = WidgetProps & {
  icon?: string;
  panel?: WidgetPanel;
  side?: 'left' | 'right';
  widthPx?: number;
  placement?: WidgetPlacement;
  title?: string;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  triggerLabel?: string;
  triggerIcon?: string;
  hideTrigger?: boolean;
  button?: boolean;
};

Remarks​

  • Accepts one reusable panel definition.
  • Slides open from the selected edge while keeping the shell mounted for smooth animation.
  • Can render with a built-in handle trigger or stay externally controlled.
  • Stops pointer, mouse, touch, and wheel propagation so sidebar interactions do not leak into the deck canvas.
  • Reparents itself to the full widget overlay so the sidebar can span the full deck edge.