Multi-Product Docs

By default the sidebar shows a single page tree — right for one product. If you document several products, group content into root folders and the sidebar gains a product-switcher dropdown; picking an entry loads that product's own page tree.

Enable it

Create one folder per product

content/docs/
├── meta.json            # { "pages": ["product-a", "product-b"] }
├── product-a/
│   ├── meta.json
│   ├── meta.zh.json
│   ├── index.mdx
│   └── index.zh.mdx
└── product-b/
    └── ...

Mark each folder as a root

In each product's meta.json, set "root": true and give it a title, description, and icon — these become the dropdown entry:

{
  "title": "Product A",
  "description": "The flagship product",
  "icon": "Rocket",
  "root": true,
  "pages": ["index", "guide", "api"]
}

Add a meta.zh.json twin with the Chinese title/description.

Update internal links

URLs now include the product folder: /product-a/guide, /zh/product-a/guide. Write internal links accordingly.

That's it — no code changes. With root folders present the dropdown appears automatically; without them the sidebar stays a plain tree.

Tips

List "index" first in each root folder's pages so the dropdown lands on the product's intro page.
You may want / to redirect to a default product — see src/routes/$.tsx for where to add a redirect.

Enable it

Tips

On this page