If you've ever used Notion, Medium, or Linear, you've already met the floating toolbar. It's the small panel that quietly appears next to text the moment you select it — bold, italic, link, comment, done. No hunting through a fixed top bar. No breaking flow.
For developers building writing apps, CMS dashboards, support tools, or AI-assisted editors, a floating toolbar isn't a nice-to-have anymore. It's the default UX users expect.
This guide breaks down what a floating toolbar is, why it matters, the seven features every modern implementation should ship with, and how to add one to your app in roughly ten minutes using Eddyter.
What Is a Floating Toolbar?
A floating toolbar is a context-aware UI element that appears near a user's text selection or cursor, instead of sitting fixed at the top of the editor. It only surfaces the actions relevant to that moment — formatting, linking, commenting, AI commands — and disappears when the user clicks away.
It goes by a few names depending on the framework:
- Floating toolbar — the most common term, popularized by Lexical and Slate.
- Contextual toolbar — emphasizes that the options change based on selection.
- Inline toolbar — used by editors like Medium and Ghost.
- Selection toolbar — focuses on the trigger (a text selection).
- Hover toolbar — sometimes used when the panel responds to hover instead of click.
They all describe the same pattern: a lightweight, position-aware menu that follows the user's intent rather than forcing the user to follow it.
Floating Toolbar vs. Static Toolbar
Both work. They solve different problems.
A modern editor often ships both: a static toolbar for power features (tables, image uploads, headings) and a floating toolbar for inline formatting. That hybrid is what most users now consider "default."
Why a Floating Toolbar Matters for UX
Three reasons it has become the standard:
1. It respects the user's focus. A writer's eye is on the text they just selected. Putting formatting controls a few pixels away — instead of forty pixels up — cuts mouse travel and protects flow state.
2. It scales to mobile. Fixed toolbars eat scarce vertical space on phones. A floating toolbar collapses to a compact strip that appears only when the user taps and selects, which is exactly how iOS and Android handle native text actions.
3. It reduces interface clutter. SaaS dashboards, AI chat tools, and embedded editors usually can't afford a 60-pixel toolbar pinned to the top of every text field. A floating toolbar keeps the surface clean until the user actually needs it.
The result is the same outcome in every product analytics dashboard: longer sessions, fewer formatting errors, and higher task completion.
7 Features Every Floating Toolbar Should Have in 2026
If you're building or evaluating a floating toolbar, these are the table stakes.
1. Selection-aware positioning
The toolbar should anchor to the bounding box of the user's text selection — above by default, flipping below the selection when there isn't enough room above. Modern positioning libraries (Floating UI, formerly Popper.js) handle this in a few lines.
2. Contextual action sets
A selection inside a paragraph should surface different actions than a selection inside a code block or a table cell. The toolbar should read the current node type and render only the formatting options that make sense for it.
3. Keyboard shortcuts and accessibility
Every action in the floating toolbar needs a keyboard equivalent (Cmd/Ctrl+B, Cmd/Ctrl+K) and proper ARIA roles. Screen readers should announce the toolbar as a toolbar, not a tooltip.
4. Link editing inline
Inserting and editing links is the single most common toolbar action. The floating toolbar should expand inline into a link editor — paste a URL, hit enter, done — without opening a modal that interrupts the writing flow.
5. AI actions (the 2026 differentiator)
This is what separates a 2020-era floating toolbar from a 2026 one. The toolbar should expose AI commands — Improve writing, Make shorter, Translate, Continue — directly on the current selection. Users now expect this the same way they expect Bold.
6. Smooth show/hide animation
Pop-in toolbars feel cheap. A 120–180ms fade-and-slide animation, with positioning recalculated on scroll and window resize, is what separates a polished editor from a prototype.
7. Theming and customization
The floating toolbar should match the host product's design system — colors, border radius, font, button styles. Hardcoded styles are the number one reason teams rip out off-the-shelf editors.
How to Add a Floating Toolbar with Eddyter
Eddyter is a managed WYSIWYG rich text editor SDK built on Meta's Lexical framework. Its floating toolbar is included out of the box, with all seven features above already wired up — including AI commands.
Setup takes roughly ten minutes.
Step 1: Install the SDK
bashnpm install @eddyter/react
Step 2: Drop the editor into your app
Step 3: Customize the toolbar (optional)
That's the full integration. No positioning math, no portal mounting, no shortcut wiring. Storage, AI infrastructure, and updates are handled on Eddyter's side.
If you're comparing options, Eddyter is roughly 3x cheaper than TinyMCE, CKEditor, or TipTap Pro for equivalent features, and the floating toolbar ships on every plan, including the free tier.
Common Floating Toolbar UX Pitfalls
A few things teams get wrong when they build this from scratch:
- Overcrowding the toolbar. More than six or seven icons turns it into a menu bar in disguise. Group rarely-used actions behind a "More" button.
- Letting it overlap the selection. If the toolbar covers the text the user just selected, it defeats its own purpose. Always offset by at least 8px.
- Forgetting scroll behavior. When the user scrolls, the toolbar should either follow the selection or hide. A toolbar frozen mid-page is jarring.
- No mobile fallback. On touch devices, "selection" works differently. The toolbar should dock to the keyboard area or appear above the on-screen keyboard, not float arbitrarily.
- Hardcoded z-index. Embedded editors live inside other apps. A z-index of 9999 will eventually fight a modal somewhere. Use a configurable layer.
Real-World Use Cases
Content platforms — Medium-style writing surfaces, newsletters, and blog editors.
SaaS dashboards — comment boxes, ticket descriptions, internal wikis.
AI chat and document tools — selection-based "Improve this" and "Translate this" commands.
CMS and admin panels — long-form content fields where a permanent toolbar wastes space.
Mobile-first apps — anywhere the editor surface is small and every pixel of vertical space matters.
Floating Toolbar FAQ
What's the difference between a floating toolbar and a context menu?
A context menu typically appears on right-click and contains system actions (cut, copy, paste). A floating toolbar appears on text selection and contains formatting and editor-specific actions. They can coexist.
Is the floating toolbar accessible?
It can be, if implemented correctly. The element needs role="toolbar", keyboard navigation between buttons, and shortcut equivalents for every action. Eddyter's implementation is WCAG 2.1 AA compliant by default.
Can I add custom actions to the floating toolbar?
Yes — in Eddyter, custom actions are registered as plugins and rendered as toolbar buttons with their own icons, shortcuts, and handlers.
Does the floating toolbar work in iframes and embedded editors?
Yes. Modern implementations use portals to render the toolbar outside the editor's overflow boundary, which avoids clipping inside iframes, modals, and scrollable containers.
How is a floating toolbar different from a slash menu?
A slash menu appears when the user types / and lets them insert blocks (headings, lists, images). A floating toolbar appears on selection and lets them format or act on existing text. Most modern editors ship both.
Ship a Floating Toolbar Today
Building a production-grade floating toolbar from scratch — positioning, accessibility, AI integration, mobile fallbacks — typically takes a small team two to four weeks. Eddyter ships it as a single config line, included on every plan.
**Try Eddyter free →
**No credit card. Full floating toolbar, AI actions, and storage included.
Top comments (0)