Get help on Discord

Mix explicit list items with dynamic documentList in Structure Builder

3 replies
Last updated: Jun 10, 2021
In the structure builder, is it possible to mix explicitly defined list items with a dynamic documentList?For example showing a list item at the top of the pane for categories, and then the list of all posts below, instead of having to drill down one more level to "all posts".
AI Update

Yes, you can absolutely mix explicitly defined list items with a dynamic documentList in the same pane! This is a common pattern in the Structure Builder and exactly the kind of flexible organization it was designed to support.

Here's how you can achieve what you're describing - showing a "Categories" list item at the top, followed by all posts:

// sanity.config.ts
import {structureTool} from 'sanity/structure'

export default defineConfig({
  plugins: [
    structureTool({
      structure: (S) =>
        S.list()
          .title('Content')
          .items([
            // Explicit list item for browsing by category
            S.listItem()
              .title('Posts by Category')
              .child(
                S.documentList()
                  .title('Categories')
                  .filter('_type == "category"')
              ),
            
            // Divider for visual separation (optional)
            S.divider(),
            
            // All posts as a document list
            ...S.documentTypeListItems().filter(
              listItem => listItem.getId() === 'post'
            ),
            
            // Or you could be more explicit:
            // S.documentTypeListItem('post').title('All Posts'),
            
            // Add other document types
            ...S.documentTypeListItems().filter(
              listItem => !['post', 'category'].includes(listItem.getId())
            )
          ])
    })
  ]
})

The key insight is that the items array in S.list() accepts any combination of:

  • S.listItem() - Custom list items that can open child lists or documents
  • S.documentTypeListItem() - Convenience method for standard document type lists
  • S.documentList() - Filtered document lists
  • S.divider() - Visual separators

You can even get more creative by mixing in filtered document lists directly:

S.list()
  .title('Posts')
  .items([
    // Browse by category
    S.listItem()
      .title('By Category')
      .child(/* category browser */),
    
    // Recently published
    S.listItem()
      .title('Recent Posts')
      .child(
        S.documentList()
          .title('Recently Published')
          .filter('_type == "post"')
          .params({})
      ),
    
    S.divider(),
    
    // All posts
    S.documentTypeListItem('post').title('All Posts')
  ])

The Structure Builder is incredibly flexible - you're not limited to the default "drill down" pattern. You can flatten your structure, mix different types of navigation, and organize content however makes the most sense for your editors. The Structure Builder documentation has more examples of creative ways to organize your content.

Show original thread
3 replies
Wondering the same thing!
User I think it may be possible by defining the structure asynchronously , and then manually creating an array of items with the categories one first, and the document items following, instead of using a built in structure builder method. Here's something similar I did:
S.listItem()
  .title('Child Pages by Parent')
  .icon(RiPagesLine)
  .child(() =>
    documentStore.listenQuery(`*[_type == "page" && defined(content.main.parent._ref)]{'parent': content.main.parent->}`).pipe(
      map(allParentPages => {
        // Filter array for unique values since the query will return
        // the parents of all children so there will be duplicates
        const parents = allParentPages
          .filter(
            (parentDocument, index, array) =>
              array
                .map(mapObj => mapObj._id)
                .indexOf(parentDocument._id) === index,
          )
          .map(uniqueParents => uniqueParents.parent);

        const parentListItems = parents.map(parent =>
          S.listItem()
            .title(parent.content.main.title)
            .icon(RiPagesLine)
            .child(
              S.documentList()
                .title(parent.content.main.title)
                .schemaType('page')
                .filter('content.main.parent._ref == $parentId')
                .params({
                  parentId: parent._id,
                })
                .child(S.document().views(Views())),
            ),
        );

        return S.list()
          .title('Child Pages by Parent')
          .items(parentListItems);
      }),
    ),
  ),
Thank You Nic! Will give this a try 👍

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?