How To Build A Floating Menu With Lexical and React

Konstantin Münster
9 min readMay 9

Nowadays text editors like Notion let you easily format text with a bubble menu near your selection. Let’s build one!

A floating menu that pops up above your current text selection

Nowadays tools like Notion achieved quite a leap in terms of text editing experience. They introduced new patterns which seamlessly integrate into our flow of writing.

One of these new patterns is a floating menu that shows up whenever you select text. It keeps your attention on the text you are editing — instead of letting it wander to a menu bar at the very top of the page. I love those little details!

Since I recently explored Lexical as a new framework for building rich text editors, I wanted to try creating such a bubble menu with Lexical and React.

Here’s the result:

Floating menu

Let’s go through it, step by step!

Setting up the editor

For this article, I created a simple editor upfront so that we can avoid any boilerplate code for the setup. You find this setup on this branch in the Github project.

If you want to follow along, you can clone the project and follow the installation instructions.

Once you installed the dependencies and started the development server, you should see this little editor on your localhost instance:

Text editor

Note: If you want to create the floating menu for your already existing editor, make sure you have all required dependencies installed. You find these inside the package.json.

Creating a new plugin

Having the setup done, we can move forward to creating the plugin for the floating menu.

With Lexical, plugins are essentially React components that we wrap within the editor composer. Hence we create a new file for our floating menu inside the plugins directory.

import { useLexicalComposerContext } from…
Konstantin Münster

Writing about Web Development and Freelancing. //