UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

Documentation TOC Layout

Documentation TOC Layout turns a frequent interface judgment into an executable constraint before generation.

docstoclayout

Design Principle

Long docs need to show current position, section structure, and related next steps.

Principle Long docs need to show current position, section structure, and related next steps.

Design action Left nav owns the doc set, prose uses constrained width, right TOC tracks h2/h3, and the bottom offers previous/next or related links.

Examples Positive example: Guides, standards, knowledge resource maps, API docs, and design system documentation. Counterexample: A long page has no anchors, table of contents, or return path.

Apply when Guides, standards, knowledge resource maps, API docs, and design system documentation. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Left nav owns the doc set, prose uses constrained width, right TOC tracks h2/h3, and the bottom offers previous/next or related links.

Apply When

  • Guides, standards, knowledge resource maps, API docs, and design system documentation.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • A long page has no anchors, table of contents, or return path.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
85%
Version
v1
Published
6/6/2026