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 menu, then × in the corner to collapse it. A row of highlight swatches, then action buttons labelled in vertical Korean · a compact, near-square menu that keeps the reading axis in the labels.

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

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

PreviousVerse Next Hyperlink Treatment

1	function 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