Skip to content
🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now
Get help on Slack

How to create multiple headings in the first pane of the editor in Sanity.io.

8 replies
Last updated: May 18, 2021
Hi folks. I’m working on the desk structure and trying to figure out how to have more than one list with a title that contains groups if of document types. e.g. in this screenshot, I want to have another list like the “Site” one but with a different title. I can’t seem to get it working. It seems I can only use one 
S.list(…)
in the structure?
May 17, 2021, 10:40 PM
Hey Shane! Structure builder can definitely be confusing to work with!
Based off of my experience, you can only use one 
S.list()
in your base structure (though I’ve never actually seen anything in the docs confirming this). When I’ve done something similar to what you’re looking to do I’ve used 
S.listItem()
. For example, my structure looking like this:

S.list()
.title('Base')
.items([
  S.listItem()
    .title('Blog')
    .icon(BiColumns)
    .child(
      S.list()
        .title('Blog Documents')
        .items([
          S.documentTypeListItem('post'),
          S.documentTypeListItem('author')
        ])
    ),
  S.listItem()
   .title('Learning Path')
   .icon(BiMapAlt)
   .child(
    S.list()
      .title('Learning Path')
      .items([
        S.documentTypeListItem('section'),
        S.documentTypeListItem('module')
      ])
  ),
])
This gives me a structure that looks like this:
May 18, 2021, 4:11 PM
If you give me a text example of what you’d like your structure to look like I can give you more specific help.
May 18, 2021, 4:12 PM
Hey Shane! Structure builder can definitely be confusing to work with!
Based off of my experience, you can only use one 
S.list()
in your structure (though I’ve never actually seen anything in the docs confirming this). When I’ve done something similar to what you’re looking to do I’ve used 
S.listItem()
. For example, my structure looking like this:

S.list()
.title('Base')
.items([
  S.listItem()
    .title('Blog')
    .icon(BiColumns)
    .child(
      S.list()
        .title('Blog Documents')
        .items([
          S.documentTypeListItem('post'),
          S.documentTypeListItem('author')
        ])
    ),
  S.listItem()
   .title('Learning Path')
   .icon(BiMapAlt)
   .child(
    S.list()
      .title('Learning Path')
      .items([
        S.documentTypeListItem('section'),
        S.documentTypeListItem('module')
      ])
  ),
])
This gives me a structure that looks like this:
May 18, 2021, 4:11 PM
If you give me an text example of what you’d like your structure to look like I can give you more specific help.
May 18, 2021, 4:12 PM
user M
thanks for your reply 🙂 I see what you mean - although I was trying to just get multiple headings in the first pane of the editor, something like this (i just did this in photoshop quickly). I don’t think it’s possible though?
May 18, 2021, 9:35 PM
Ah yeah, I figured that was what you meant. Unfortunately you can’t condense panes like that.
May 18, 2021, 9:37 PM
All good! Is there any way to customise the actual react components that are in the lists? I’ve actually added “fake” list items just with a title - see “data models” and “settings section” here - I thought possibly I could override the CSS on these and set pointer-events: none and change the style to make them appear like headings
May 18, 2021, 9:41 PM
user M
I got this working quite well - just using an empty list item for the headings and setting some css on them, if anyone is interested for reference:

S.listItem().id('structure_customListHeading').title('Structure'),

/* Override custom list headings */
a[href$='_customListHeading'] {
  pointer-events: none;
}

a[href$='_customListHeading'] h2 {
  font-weight: 600;
}

a[href$='_customListHeading'] div[class^='DefaultPreview_media'] {
  display: none;
}

May 18, 2021, 11:52 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
How to turn PortableText into plain text in Javascript?Dec 7, 2020
Rendering nested block contentJan 18, 2021
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
GraphQL query resolving references on a _raw field in GatsbyMay 17, 2022
Error: unable to resolve image URL from source (undefined)Sep 11, 2022
Extracting referenced images from an object array in Sanity.ioMay 17, 2020
How to Disallow Robots on a SubdomainNov 12, 2020
How to preview content inside a reference array in Sanity.ioAug 14, 2020
Adding a ref to the body tag using Helmet in ReactJul 2, 2020
Hi, I need help with Iframe preview, I have a `route` schema with unique `slug` (`/lb/123`) and also I have `page` schema...Dec 21, 2020

Related contributions

Turbo Start Sanity
Template

Featured

The battle-tested Sanity template that powers Roboto Studio's websites

Schema UI - Next.js Sanity Starter
Template

Featured

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko

The Swaddle
Made with Sanity

Featured

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar