Doc Layout

You might say

Lay this out like documentation: navigation on the left, the article in the middle, and this page's outline on the right.

Combine section navigation, article content, and an on-page outlineA documentation layout often uses a left navigation for pages, a readable center column for the article, and a right outline for headings. Keep each column's job distinct and collapse secondary navigation on small screens.

Know first

Sidebar Anchor

Table of Contents Text Outline

You can say this to an AI Agent

Implement a three-column docs layout: cross-page navigation left, constrained article center, and current-page anchors right. Hide the outline first on tablets and move site navigation into a mobile drawer. Verify page and section highlights stay distinct.

When to use it

Technical documentation
ContentsBodyOutline
Help center
ProjectsAll projectsAssigned to meSystemMembersSettings
Design system
BackgroundApproachRisksConclusion
Long structured knowledge base
→

When NOT to use it

Give all three columns equal visual weight
ContentsBodyOutline
Make the article column too wide to read
Keeping three columns on mobile leaves too little width for the body.
Show an outline that does not follow the headings
Keep side columns fixed on a narrow screen
1.11.21.32.12.22.33.13.2
The table of contents is longer than the page itself

Anatomy

Table of contentsTextOutline

Organize chapter and page entries for a site or document collection

The main content area of the page needs to be prioritized to ensure readable width.

List the sections of the current page and mark the reading position

Variants

Full

The default form of widescreen technical documents

No Outline

In medium width, the outline is collapsed first to reserve space for the main text.

Mobile

The narrow screen puts the table of contents into a drawer and uses a single column for the main text.

Typical use cases

API docs

Start

Quick Start

Installation

Configuration

Deployment

Quick start

npx vibekit init my-app

Outline of this page

Prerequisites

Three steps to get started

Next step

Help center

Help classification

Account and login

Billing and Refund

Privacy and Security

How do I reset my password?

1Open the login page and click "Forgot Password"

2Enter the registration email and check the verification code

3Set a new password and log in again

Modify binding email

Turn on two-step verification

Component library

API reference

Authentication method

User interface

Order interface

Error code

GET /v1/users/{id}

Query the public information of a single user by ID.

{ "id": "u_1024", "name": "Ali" }

Outline of this page

Request parameters

Response example

Error code

Knowledge base

User Manual

Unboxing

Connect to the network

Daily use

Cleaning and maintenance

Step 1: Unpacking and Inspection

💡 Please charge it for 30 minutes when you turn it on for the first time. The indicator light turns green before you start using it.

This chapter

Packing list

First boot

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

Technical docs need navigation across pages and within the current long article. Desktop has room but mobile is narrow. How should the layout adapt?

A. Use site navigation left, article center, and page outline right, progressively collapsing side columns on narrow screensB. Keep three equal-width columns on every screen, including all directories on mobileC. Mix site pages and current headings into one long directory and use the rest for content