ComponentsPopover Menu
Overlays

Popover Menu

A dark vertical popover that opens from a trigger, offering highlight color swatches and action items with vertical Korean labels. Scales in from its trigger origin, collapses on close.

Design question

How should a contextual popover menu orient and animate in a vertical reading interface? Horizontal toolbars break the reading flow, and a menu that scales from center feels disconnected from the trigger.

Default

Tap the menu icon to open the action bar, then × to collapse it. Highlight swatches at top, action labels in vertical Korean text — the bar itself reads top-to-bottom, matching the reading axis.

tsx
1function VerseActionBar({ onHighlight, onSave, onNote, onCopy }) {
2 const COLORS = [
3 { id: "yellow", color: "#FFD166" },
4 { id: "green", color: "#44CF7A" },
5 { id: "blue", color: "#60A5FA" },
6 { id: "pink", color: "#F472B6" },
7 ]
8

Guidance

Do
  • Arrange actions top-to-bottom matching the vertical reading axis
  • Place highlight swatches at the top — they're the most frequent action
  • Use vertical Korean labels (저장, 노트, 복사) below each icon
  • Scale the menu in from its trigger, not from the viewport center
Don't
  • Use a horizontal toolbar — it forces the user's eye off the reading axis
  • Label actions with horizontal text in a vertical reading context
  • Place the menu on the reading axis — it should sit at the edge of the selected column

Accessibility

Trigger is a labeled button; the open menu is role='toolbar', aria-label='구절 동작'. Each button has aria-label. Keyboard: arrow keys navigate within the menu, Escape collapses it.

Open Question

When the selected verse is in the leftmost column (reading terminus), where does the popover go? It can't extend further left.

← PreviousVerseNext →Highlight