🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now

Adding tabs to a document in the structure builder using plugins.

27 replies
Last updated: Dec 3, 2021
Is there a easy way to add Tabs per say to a document in the structure builder?
Dec 3, 2021, 3:42 PM
You can use fieldsets to group things without affecting the actual data structure.
Then there’s a plugin for Sanity that will turn your fieldset groups into tabs.
Dec 3, 2021, 3:42 PM
Perfect!
Dec 3, 2021, 3:44 PM
user S
using that plugin forces you to create an object which is changing the data structure
Dec 3, 2021, 3:44 PM
Yes - I just realised that. It’s either changed or I was thinking of a different one. Thanks for pointing that out
user S
Dec 3, 2021, 3:45 PM
Well, we aren't set on data structure yet so I think this still works. Would there be a drawback to using a object to group fieldsets?
Dec 3, 2021, 3:46 PM
Let me know if you find one without structure changes. I'm looking for that :)
Dec 3, 2021, 3:47 PM
This seems to be 'define fieldsets', 'specify fieldset' right?
Dec 3, 2021, 3:47 PM
Which is good, maybe not the fact its 'ALPHA ALPHA ALPHA' haha
Dec 3, 2021, 3:47 PM
Actually - I think that’s just the example. I believe in the one I linked you can apply that to the parent document / object so that it ISN’t affecting your structure.
Dec 3, 2021, 3:48 PM
I could be wrong though. I used something like this on a project last year and it didn’t require schema changes.
Dec 3, 2021, 3:49 PM
I'm pretty much there so I'll just try it out and see ha
Dec 3, 2021, 3:49 PM
So -- didn't have to create a object.
Dec 3, 2021, 3:51 PM
But I only get fieldsets, no tabs ha
Dec 3, 2021, 3:52 PM
Did you add the input component?
Dec 3, 2021, 3:52 PM
Probably cause i'm not using the 'inputComponent', which seems to be required as a object?
Dec 3, 2021, 3:52 PM
No.. but I guess that has to be a top level object in the document fields?
Dec 3, 2021, 3:53 PM
inputComponent is a React component. it’s provided by the plugin
Dec 3, 2021, 3:53 PM
It would have to be on the document:
Dec 3, 2021, 3:53 PM
Right, how do I specify it to be used without nesting my document under a Object?
Dec 3, 2021, 3:53 PM
I think it would be…
{
  type: "document",
  title: `Frontpage`,
  name: `frontpage`,
  inputComponent: Tabs,
  fieldsets: [...]
  fields: [...]
}

Dec 3, 2021, 3:54 PM
Cool so I have tabs and didn't have to change any structure.
Dec 3, 2021, 3:56 PM
Noice! cc
user S
☝️
Dec 3, 2021, 3:56 PM
oh that's cool.
Dec 3, 2021, 4:12 PM
Yes
Dec 3, 2021, 4:14 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.

Was this answer helpful?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
In the tutorial, there is samples of what the API returns as JSON. Is there a way to view these ?Jan 11, 2021
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
Handling dynamic meta titles and descriptions in SanityFeb 25, 2021
has anyone figured out a way to sort lists of content in the studio? i'd love a drag and drop if possibleJan 13, 2021
Organizing document types in Sanity Studio using Structure BuilderMay 13, 2020
How to view and delete images using the media pluginSep 14, 2020
How to structure the content on the front page of a website using Sanity.io.Jun 19, 2020
Request for "generate" button for string type and suggestion to use slug schema type instead.Jul 29, 2020
How to improve image loading with Gatsby and gatsby-plugin-sanity-image?Nov 27, 2020
Trouble querying a field with array of references in Slack threadSep 1, 2020

Related contributions

Turbo Start Sanity
- Template

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

Go to Turbo Start Sanity

Schema UI - Next.js Sanity Starter
- Template

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
Go to Schema UI - Next.js Sanity Starter

The Swaddle
- Made with Sanity

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
Go to The Swaddle