---
title: "Menus and handles"
description: "Menus and handles place your own controls next to the content: a menu at the selected text, a menu on empty lines, and a handle to drag blocks."
canonical_url: "https://tiptap.dev/docs/editor/extensions/menus"
---

# Menus and handles

Menus and handles place your own controls next to the content: a menu at the selected text, a menu on empty lines, and a handle to drag blocks.

## When you use them

- **Formatting a selection.** Bubble menu shows a menu next to the selected text, for example with buttons that apply marks.
- **Inserting blocks.** Floating menu shows a menu on empty lines, for example to insert blocks.
- **Moving blocks.** Drag handle shows a handle that people drag to move a block to another place. With its `nested` setting, it also works for list items and other nested content.

## How they work

- **You build the controls.** The extensions show and position an element you provide, and its markup and styling are up to you.
- **React and Vue have components.** `@tiptap/react` and `@tiptap/vue-3` have Bubble menu and Floating menu components; with them you don't add the extension. Drag handle React and Drag handle Vue are the drag handle as a component, which registers it with the editor for you.
- **Several instances need their own keys.** Give every menu or handle in one editor a unique `pluginKey`.
- **You add them yourself.** None of them is part of the [StarterKit](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md).

## Related

- [Cursor and selection](https://tiptap.dev/docs/editor/extensions/cursor-and-selection.md) shows where dragged content will drop.
- [Text formatting](https://tiptap.dev/docs/editor/extensions/text-formatting.md) has the marks that a bubble menu usually applies.