Notion-Style Slash Command Menu — HTML CSS JS Snippet

The slash command menu popularized by Notion has become the expected way to insert structured content into a rich text editor — type /, get a contextual list of block types, keep typing to filter, and press Enter or click to insert. It looks simple, but building it correctly touches three genuinely tricky browser APIs at once: caret-relative positioning, contenteditable text-node manipulation, and keyboard-versus-mouse interaction handling. This snippet implements the full pattern in a single contenteditable element with no editor framework.

Finding the caret's actual screen position

The hardest part of a slash menu is placing it exactly below the text cursor, not the editable container. This snippet uses the Selection and Range APIs: window.getSelection() returns the current selection, sel.getRangeAt(0) gives the active Range, and calling .collapse(true) shrinks that range to a zero-width point at the start of the selection — which, since the user just typed a character, is effectively the caret position. range.getClientRects()[0] (falling back to getBoundingClientRect() for an empty collapsed range at the very end of a line) returns the caret's actual pixel coordinates relative to the viewport, and positionMenu() uses those coordinates directly to set the menu's position: fixed; top; left — this is the same technique real rich-text editors use to place inline toolbars, mention pickers, and emoji menus exactly where the user is typing rather than anchored to the editor's bounding box.

Detecting the trigger and tracking the active text node

The input event handler reads window.getSelection().anchorNode, which is the actual DOM text node the caret sits inside. If that text node's content ends with /, openMenuAt() stores a reference to it as slashNode and opens the menu. On every subsequent keystroke while the menu is open, the handler re-reads slashNode.textContent, finds the *last* / in it with lastIndexOf('/'), and treats everything after that index as the live filter query — so typing /head after the initial / progressively narrows COMMANDS down to just "Heading" via a simple .includes() match against each command's key and label. Typing a space, or moving the caret to a different text node entirely, closes the menu — matching Notion's own behavior that a slash command is abandoned once you've clearly moved past it.

Keyboard navigation without hijacking normal typing

The keydown handler only intercepts ArrowUp, ArrowDown, Enter, and Escape, and only when menu.classList.contains('open') — every other keystroke (letters, backspace, punctuation) falls through untouched to the browser's native contenteditable handling, which is what keeps the query-filtering behavior working through the input listener rather than needing to be reimplemented in keydown. ArrowDown/ArrowUp wrap the activeIndex around the filtered list length using modulo arithmetic ((activeIndex + 1) % filtered.length), and Enter calls selectCommand() on whichever item is currently highlighted — importantly, e.preventDefault() is called on all four keys to stop the browser's default behavior (arrow keys moving the caret, Enter inserting a line break) from firing at the same time as the menu interaction.

Why menu clicks use `mousedown` with `preventDefault()`, not `click`

Each rendered menu item listens for mousedown, not click, and calls e.preventDefault() immediately. A click event fires after mousedown and mouseup, and by then the browser has already moved focus away from the contenteditable editor toward whatever was clicked, collapsing the text selection selectCommand() needs to correctly locate slashNode. Preventing the default on mousedown stops that focus shift, keeping the editor's selection intact through the click — the same technique production editors like Notion and Lexical use for toolbar interactions.

Replacing the "/query" text with a real block element

insertBlock() performs the actual content swap: it builds a Range around slashNode's full contents, deletes them, removes the now-empty text node from the DOM, and appends a new <span> styled per the selected command's block class (heading, bullet, code, divider, or image placeholder), followed by a <br> so the next line starts fresh below it. A new collapsed Range is placed at the end of the inserted element and applied via sel.addRange(), restoring a sensible caret position and calling editor.focus() so typing continues immediately.