Skip to the collection
Back to vault

Resend — documentation with three levels of navigation

Resend — documentation with three levels of navigation

Functional Product UI · editorial

Source: pending · Classification: pending

Give each navigation level its own place.

Original principle diagram · Draft explanation

Give each navigation level its own place.

What to borrow: Separate global sections, document navigation and the current page's contents around a readable main column.

When to use this principle
When it works
Documentation with a large hierarchy and articles that contain several sections.
When to avoid it
Squeezing three columns onto a phone or adding a contents list to a very short page.

Original teaching diagram with illustrative content; not a screenshot or reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.

  • Steal · grid/layoutmodel draft

    The captured page has global documentation sections across the top, grouped document links on the left, the article in the center and an On this page list on the right. Each region answers a different navigation question.

Fonts: Inter · Original: Resend

private-reference-only

View original ↗
Source & usage rights

Original: Resend. Source verification: pending review.

Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.

Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.

Captured: 2026-10-10. Capture does not establish source verification.

Similar, and why

  1. Cal.com — pick a date and time

    same family (Functional Product UI) · shares Inter · palette within ΔE 6.7 · also steals grid/layout, component pattern, copywriting

  2. Raycast — Root Launcher & Calculator Bar

    same family (Functional Product UI) · shares Inter · palette within ΔE 9.8 · also steals component pattern, grid/layout · same section (nav)

  3. Linear — Triage Inbox & Split Inspector

    same family (Functional Product UI) · shares Inter · palette within ΔE 10.5 · also steals grid/layout, component pattern

  4. Cal.com — booking details form

    same family (Functional Product UI) · shares Inter · palette within ΔE 6.7 · also steals grid/layout, component pattern

  5. Linear — Command Menu (⌘K) Filtered State

    same family (Functional Product UI) · shares Inter · palette within ΔE 6.8 · also steals component pattern · same section (nav)

Filed under editorial · nav · practical-patterns · reading-pattern · documentation · navigation · quickstart