Components›Tabs
Navigation

Tabs

Switch between related content panels. Horizontal tabs remain common even in vertical reading contexts.

Design question

Do horizontal tabs still make sense when the primary reading axis is 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 }) {
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) => (

Guidance

Do
  • ✓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)?

← PreviousSliderNext →Verse