# Selection Bubble Menu

> A floating toolbar that springs up above any text selection, the pattern from Medium and Notion. Highlight text and format actions appear right where you are looking, follow the selection as you scroll, and flip below when there is no room above. Pressing a button never drops your selection, so you can stack formats without re-selecting. Bring your own actions, icons, and shortcuts. Self-contained: portaled, keyboard-aware, adapts to light or dark. React plus framer-motion.

- Author: [Kiki](https://21st.dev/@laziekiki)
- License: mit
- Tags: Menu, Toolbar, Bubble Menu, Editor, Wysiwyg
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@laziekiki/components/selection-bubble-menu

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/laziekiki/selection-bubble-menu?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/menu.md