How to create multiple headings in the first pane of the editor in Sanity.io.
8 replies
Last updated: May 18, 2021
S
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
This gives me a structure that looks like this:
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')
])
),
])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
This gives me a structure that looks like this:
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')
])
),
])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
S
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
S
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
S
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.