Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
selection-menu
Floating toolbar that appears on text selection. Composes action components for highlighting, sharing, notes, and comments.
Overview
The <selection-menu> component provides a Medium-style floating toolbar that appears when text is selected. It composes action components as children: <highlight-wc> for color highlighting, <share-wc> for sharing quotes, <note-wc> for private notes, and <comment-wc> for collaborative comments.
The element itself IS the toolbar — no DOM reparenting. It starts hidden and positions itself above the selection using fixed positioning with viewport clamping.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
for | string | — | ID of a single target element to watch for text selection |
id | string | — | When set, elements with data-selection-menu="id" become targets |
Demo
Select any text in the article below to see the toolbar.
Single Target
for= attribute
<selection-menu for="my-article"> <highlight-wc></highlight-wc> <share-wc></share-wc> <note-wc></note-wc> <comment-wc></comment-wc></selection-menu> <article id="my-article"> <p>Select text here to see the toolbar.</p></article>Many-to-One (Decoupled)
Define the menu once and let multiple elements reference it by ID via data-selection-menu.
data-selection-menu attribute
<selection-menu id="reader-tools"> <highlight-wc></highlight-wc> <note-wc></note-wc></selection-menu> <article data-selection-menu="reader-tools"> <p>First article...</p></article> <article data-selection-menu="reader-tools"> <p>Second article, same toolbar.</p></article>JavaScript API
API
const menu = document.querySelector('selection-menu'); // Get current selection statemenu.getSelection(); // { range, text, target } // Dismiss the toolbarmenu.dismiss();Events
| Event | Detail | Description |
|---|---|---|
selection-menu:select | { range, text, target } | Text selected, toolbar shown |
selection-menu:dismiss | — | Toolbar hidden |
Accessibility
- Toolbar uses
role="toolbar" - Escape dismisses the toolbar
- Clicking outside the toolbar dismisses it
- Each child action has its own
aria-label
Related
- highlight-wc — Text highlighting with color palette
- note-wc — Private reader notes
- comment-wc — Collaborative comments via review-surface
- data-highlights — Attribute-based highlighting API