Documentation Layout
A Documentation Layout combines navigation, an article, examples, its outline, and next links in one reading view.
Another example
An SDK guide shows versioned navigation beside readable code and text. Wide screens also show the article outline.
Main parts
- 01Product navigation
- 02Article body
- 03In-page outline
Use it when
Use it for linked guides or references that people browse in different orders.
Do not use it when
Do not force three columns or duplicate menus on small screens. Keep examples linkable and easy to copy.
Name used in code
sidebar + main + in-page TOC + deep links Before you ship
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Use or define Documentation Layout to make the visual experience clear and easy to use. User context: An SDK guide shows versioned navigation beside readable code and text. Wide screens also show the article outline. Design concept to apply: Documentation Layout. Why it fits: Use it for linked guides or references that people browse in different orders. Do not use it when: Do not force three columns or duplicate menus on small screens. Keep examples linkable and easy to copy. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): No single official standard controls the whole term. Its meaning may change across teams, platforms, or frameworks. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Check this request
Review the current use of Documentation Layout. Definition: A Documentation Layout combines navigation, an article, examples, its outline, and next links in one reading view. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, report the evidence you found, gaps, severity, and the smallest safe fix.