Tabs present a list of switchable views. In vertical interfaces, keeping tabs horizontal creates a clear horizontal/vertical semantic split: navigation = horizontal, reading = vertical.

Default

글씨를 세로로 쓰는 것을 세로쓰기라 한다

The tabs run as a vertical rail on the right (leading) edge · each label set vertically · with the active tab marked by a bar on its content-facing edge. Categories live on the same axis as the reading.

tsx
1function VerticalContextTabs({ tabs, active, onChange }) {
return (
  <div role="tablist" aria-label="읽기 보기" style={{
    display: "flex",
    borderBottom: "1px solid var(--color-border)",
    gap: 0,
  }}>
    {tabs.map((tab) => (

Source

The exact file npx verticallyworks add tabs copies into your project · yours to edit. Styling comes entirely from the design tokens.

tsx
1"use client";
2
3/**
4 * VerticalTabs · a tab rail on the reading axis.
5 *
6 * The tablist is a vertical rail at the right edge · the reading start · with
7 * vertical labels, and panels sit to its left, where reading continues.
8 * Full `tablist`/`tab`/`tabpanel` semantics with `aria-orientation="vertical"`,

Guidance

Keep tabs horizontal · the horizontal axis separates content categories from reading content
Limit labels to 3 CJK characters or a short word
Place tab panel content in the vertical reading layout that follows

Don't

Stack tabs vertically without differentiating them from the rail
Use tabs for sequential content (use pagination or chapter navigation instead)
Add icons to tabs if labels are already short CJK characters

Accessibility

role='tablist'. Each tab is role='tab'. Each panel is role='tabpanel'. Arrow keys navigate between tabs.

Open question

When tabs control vertical content panels, should tab keyboard navigation (left/right) feel directionally mismatched with the content (up/down)?

PreviousSlider Next Verse

1	function VerticalContextTabs({ tabs, active, onChange }) {
2	return (
3	<div role="tablist" aria-label="읽기 보기" style={{
4	display: "flex",
5	borderBottom: "1px solid var(--color-border)",
6	gap: 0,
7	}}>
8	{tabs.map((tab) => (

1	"use client";
2
3	/**
4	* VerticalTabs · a tab rail on the reading axis.
5	*
6	* The tablist is a vertical rail at the right edge · the reading start · with
7	* vertical labels, and panels sit to its left, where reading continues.
8	* Full `tablist`/`tab`/`tabpanel` semantics with `aria-orientation="vertical"`,