Get help on Discord

Organizing document types in Sanity Studio using Structure Builder

1 replies
Last updated: May 13, 2020
As we're expanding our use of Sanity, we're getting more and more document types, and the list of "root folders" to the left (under "Content") in the Studio keeps growing. Is there some declarative way to group things and not have as many options in this list, or will I have to look into parts to do this?
AI Update

Good news - you don't need to dive into "parts" (that's the old Studio v2 approach). The modern, declarative way to organize your Studio navigation is the Structure Builder API, which is part of the Structure Tool.

By default, Sanity Studio shows all your document types as root-level items under "Content". The Structure Builder lets you group, nest, and organize these however you want, all through configuration code.

Here's a simple example of grouping document types:

// structure/index.ts
import type {StructureResolver} from 'sanity/structure'

export const structure: StructureResolver = (S) =>
  S.list()
    .title('Content')
    .items([
      // Group related content under list items
      S.listItem()
        .title('Products')
        .child(
          S.list()
            .title('Product Management')
            .items([
              S.documentTypeListItem('product').title('All Products'),
              S.documentTypeListItem('category').title('Categories'),
              S.documentTypeListItem('variant').title('Variants'),
            ])
        ),
      
      S.listItem()
        .title('Marketing')
        .child(
          S.list()
            .title('Marketing Content')
            .items([
              S.documentTypeListItem('campaign').title('Campaigns'),
              S.documentTypeListItem('promotion').title('Promotions'),
              S.documentTypeListItem('blogPost').title('Blog Posts'),
            ])
        ),
      
      // Or keep some at the root level
      S.documentTypeListItem('page').title('Pages'),
      
      // Dividers help visually separate sections
      S.divider(),
      
      // Settings section
      S.listItem()
        .title('Settings')
        .child(
          S.list()
            .title('Site Settings')
            .items([
              S.documentTypeListItem('siteSettings').title('General Settings'),
              S.documentTypeListItem('menuSettings').title('Menu Configuration'),
            ])
        ),
    ])

Then wire it into your sanity.config.ts:

import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {structure} from './structure'

export default defineConfig({
  // ...other config
  plugins: [
    structureTool({structure}),
    // ...other plugins
  ],
})

The Structure Builder is completely declarative and gives you infinitely-nestable categories, filtered lists, and even the ability to show the same document type in multiple places with different filters. You can also create dynamic groupings using GROQ queries (like "Published Posts" vs "Draft Posts").

Check out the Structure Builder guide and the Structure customization course for more examples and patterns!

You can use the Structure Builder to customise the structure (heh!) of your documents and group them however your want https://www.sanity.io/docs/overview-structure-builder

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?