Collection

A collection is one of the main building blocks in Prestige. It defines a documentation area, the pages that belong to it, and the sidebar structure used to navigate those pages.

Definition

You define collections in the Prestige Vite plugin config. The plugin expects an array of collection objects. Each collection usually represents a separate area of the site, such as docs or api, with its own sidebar and its own top-level navigation entry.

prestige({
  collections: [
    {
      id: "docs",
      items: [...],
    },
    {
      id: "api",
      items: [...],
    },
  ],
});

You can think of a collection as the content model behind a sidebar. The term "collection" is broader because it also drives route generation and header navigation.

How it works

A collection has two core fields: id and items.

ID

The id field is the unique key for the collection. It must match the root folder that Prestige reads inside src/content.

For example, id: "docs" points to src/content/docs.

items

The items field defines the structure of the collection. Prestige uses it to build the sidebar, sibling navigation, and generated content routes.

Each entry in items can be one of three shapes.

InternalCollectionItem

An internal collection item represents a content page inside src/content. Prestige generates the corresponding TanStack Router files for it automatically.

label

The label shown in the sidebar. This field is optional if you use the string shorthand or if the page frontmatter already provides a label.

slug

The slug is the URL path segment and the key Prestige uses to resolve the content file. It must not start or end with a slash. The value is relative to src/content.

For example, if your page lives at src/content/docs/introduction.mdx, the slug is docs/introduction.

example

items: [
  {
    label: "Introduction",
    slug: "docs/introduction", // src/content/docs/introduction.mdx
  },
  {
    label: "Showcase",
    slug: "docs/showcase", // src/content/docs/showcase.md
  },
];

Prestige resolves the file extension automatically, so docs/introduction can point to either docs/introduction.md or docs/introduction.mdx.

ExternalCollectionItem

An external collection item adds a link that Prestige does not process as content. This is useful for existing app routes or fully external URLs.

For example, if you already have an /about route and want it in the sidebar:

{
  label: "About",
  link: "/about",
}

Prestige does not generate or validate content for this item, so the target must already exist as an app route or as an external URL such as https://react.dev.

label

The label shown in the sidebar.

link

The internal path or external URL to navigate to.

CollectionGroup

A collection group is a pathless container for other collection items. It behaves like a directory in the sidebar, but it does not create its own URL segment.

Groups can be nested recursively, but in practice it is better to keep the hierarchy shallow for usability.

label: string

The heading shown for the group.

collapsed: boolean

Whether the group is collapsed by default.

items

Nested collection items. These can be internal links, external links, or more groups.

example

prestige({
  collections: [
    {
      id: "docs",
      items: [
        {
          label: "Guides",
          items: [
            {
              label: "Introduction",
              slug: "docs/introduction",
            },
            {
              label: "Installation",
              slug: "docs/installation",
            },
            {
              label: "Examples",
              items: [
                {
                  label: "Example 1",
                  slug: "docs/example-1",
                },
                {
                  label: "Example 2",
                  slug: "docs/example-2",
                },
              ],
            },
          ],
        },
      ],
    },
  ],
});

Autogenerate

Groups can also be generated automatically from a directory by using autogenerate. Prestige scans the directory recursively, creates nested groups for folders, and creates page links for .md and .mdx files.

Generated labels come from the file name by default, but you can override them with page frontmatter.

Autodiscovery: object

Object used to configure automatic generation.

directory: string

Directory relative to the current collection root.

example

prestige({
  collections: [
    {
      id: "docs",
      items: [
        {
          label: "Guides",
          autogenerate: { directory: "guides" },
        },
      ],
    },
  ],
});

If src/content/docs/guides contains Markdown files and nested folders, Prestige turns that structure into sidebar groups and internal links automatically.