<Navigator />

Minimap that shows a bird's-eye overview of the paper and lets users pan (and optionally drag-zoom) the main viewport by interacting with it.

For speed it draws every element and link as a single simplified SVG path instead of your real React views, so it stays cheap to update on large graphs. Theme cells with the elementStyle / linkStyle props, or reach the inner paper through the options escape hatch — e.g. options={{ paperOptions: { elementView: MyElementView } }}.

Mount it inside a Diagram, so it can find the nearest <PaperScroller> context, or pass a paper prop to target a specific paper. The minimap's size is controlled by the host element, not the paper prop. Size it via style / className on the host element. See NavigatorProps for every supported prop.

Type Parameters

Type Parameter	Default type
ElementData	unknown
LinkData	unknown

See

• Navigator
• https://docs.jointjs.com/learn/features/navigator

Examples

Minimap inside a Diagram

import { Diagram, Paper, Navigator, PaperScroller } from '@joint/react-plus';

function MyDiagram() {
  return (
    <Diagram initialCells={cells}>
      <PaperScroller>
        <Paper renderElement={RenderElement} />
      </PaperScroller>
      <Navigator zoom style={{ width: 200, height: 150 }} />
    </Diagram>
  );
}

Theme cells by their data

import { Diagram, Paper, Navigator, PaperScroller } from '@joint/react-plus';

function ThemedNavigator() {
  // Tint each element in the minimap using its own data.
  return (
    <Diagram initialCells={cells}>
      <PaperScroller>
        <Paper renderElement={RenderElement} />
      </PaperScroller>
      <Navigator<{ color: string }>
        style={{ width: 200, height: 150 }}
        elementStyle={({ record }) => ({ fill: record.data.color })}
      />
    </Diagram>
  );
}

Props

dynamicZoom?

readonly optional dynamicZoom?: boolean;

Keeps the minimap fitted to the content as the main paper grows or shrinks.

Default

true

elementStyle?

readonly optional elementStyle?: NavigatorElementStyleCallback<ElementData>;

Customizes how each element looks in the minimap. Called with the element's size, model, and resolved record, and returns a style map applied to its rendered node. See NavigatorElementStyleCallback.

linkStyle?

readonly optional linkStyle?: NavigatorLinkStyleCallback<LinkData>;

Customizes how each link looks in the minimap. Called with the link's model and resolved record, and returns a style map applied to its rendered <path>. See NavigatorLinkStyleCallback.

options?

readonly optional options?: Partial<Options>;

Escape hatch to the raw NavigatorOptions for anything without a dedicated prop, including paperOptions (the minimap's dia.Paper config: elementView, cellVisibility, …), zoomOptions, and mvc internals (theme, events, attributes, tagName, …).

Avoid overriding options that joint-react-plus controls itself (paperScroller, paperConstructor).

padding?

readonly optional padding?: number;

Inner padding, in px, between the minimap content and its edges. The minimap's outer size comes from the host element — set it with style or className.

Default

10

paper?

readonly optional paper?: PaperTarget;

The paper to mirror: a paper id, dia.Paper instance, or paper ref. Defaults to the nearest <PaperScroller> context when omitted.

---

showLinks?

readonly optional showLinks?: boolean;

Whether links are drawn in the minimap. Set false to show only elements. For finer control, pass your own options.paperOptions.cellVisibility.

Default

true

useContentBBox?

readonly optional useContentBBox?: boolean;

Fits the minimap to the content's bounding box (computed from model geometry, so CSS-driven sizes are ignored) instead of the full paper area.

Default

true

zoom?

readonly optional zoom?: boolean;

Enables drag-to-zoom on the minimap. The zoom bounds always come from the owning <PaperScroller> (its minZoom / maxZoom props); the Navigator does not override them.

Default

false