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

When to use it

Technical documentation
Help center
Design system
Long structured knowledge base

When NOT to use it

Give all three columns equal visual weight
Make the article column too wide to read
Show an outline that does not follow the headings
Keep side columns fixed on a narrow screen

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