ArticleNav
Previous/next navigation at the end of articles
In the canon with two real uses: the date on sebastianunda's articles and the navigation of this documentation.
Preview
The real canon component: real typography, top border and hover.
Props
| Prop | Type | Note |
|---|---|---|
prev, next | { title, url, meta? } | Both optional; with neither, nothing renders |
locale | 'es' | 'en' | Default 'es'. Controls the kickers and aria-label. |
prevLabel, nextLabel | string | Override the locale's kickers |
Tokens
| Element | Family | Size |
|---|---|---|
| Kicker ("Previous"/"Next") | Georama | 14px / 400, secondary |
| Meta | Georama | 16px / 400, secondary. Contextual label: a date on articles, a section in this documentation |
| Title | Aleo | 22px / 500, primary. Hover: accent (dark mode) |
| Top border | n/a | 1px solid, 20% opacity → full on hover |
Constraints
- Text only. No thumbnails. It is a navigation aid, not a preview.
- No "Back to list" link. NavPill handles it.
- Max-width: 90ch (matches prose).
- Title max-width: 28ch with text-wrap: balance.
- Only renders if at least one neighbor exists.
Decisions
| Decision | Why |
|---|---|
| No thumbnails | Lightweight. A navigation aid at the end of reading, not a preview |
| Top border as the hover signal | Restrained motion: minimal change, maximum clarity |
| Title in Aleo | Signals a structural element (navigation), not body |
| 28ch max-width on the title | Stops long titles from unbalancing the two columns |