# Dock menu

::alert
This guide is based on the [Basic](https://retejs.org/docs/guides/basic) guide. It is recommended to review it for a comprehensive understanding of this guide.
::

::references
  :::ref-example{link="/examples/dock" title="Dock menu"}
  :::

  :::ref-github{link="https://github.com/retejs/dock-plugin" title="Plugin"}
  :::
::

## Install dependencies

::kit
::

```bash
npm i rete-dock-plugin
```

## Plugin connection

Currently, the only preset available is the classic preset, which enables adding nodes to the editor by dragging their previews into the editor area.

```ts
import { DockPlugin, DockPresets } from "rete-dock-plugin";

const dock = new DockPlugin<Schemes>();

dock.addPreset(DockPresets.classic.setup({ area, size: 100, scale: 0.6 }));

area.use(dock);
```

## Adding nodes

In order to display node previews, you need to specify a function that returns a node instance. This function is called when a node is added to the Dock menu or dragged onto the editor area.

```ts
dock.add(() => new NodeA());
dock.add(() => new NodeB());
```

## Add at a specific position

Inserting a node at the 3rd position (2nd index)

```ts
dock.add(() => new NodeA(), 2);
```

## Remove nodes

Use the same function passed to `add` to remove the added node

```ts
const createNodeA = () => new NodeA()


dock.add(createNodeA);
dock.remove(createNodeA);
```

Check out the complete result on the [Dock menu](https://retejs.org/examples/dock) example page.