Unlock seamless workflows and faster delivery with our latest releases- get the details

Customizing Sanity Studio layout with horizontal top navigation header

6 replies
Last updated: Oct 12, 2021
Hello! We’re looking into customizing the Sanity studio and want see if we can create a layout where there is a horizontal top navigation header with buttons that lead to editing different document types, i.e. a somewhat different layout than within the desk tool. We have some different ideas on how to solve this and would like to know how feasible each of these are:
1.
Create new tools for editing each kind of document type. This has the advantage that the Sanity studio layout already lists the tools horizontally on top, and that we can customize each tool completely with the help of e.g.
@sanity/react-hooks
. The downside is we have to reimplement a lot of functionality ourselves (unless there is a way to e.g. import the edit document panel part of the desk tool, with state handling etc?)2.
Customize the desk tool. Probably involving the structure builder. Perhaps the leftmost pane can be styled to look like a top navigation menu instead? This might require hiding the default horizontal studio header (containing search, tools etc). If possible this is probably the most straightforward way?3.
Have several customized desk tools. If option 2 is not feasible, perhaps we could have separate desk tools for each document type, and then include them in the studio with different names. Not sure if this is possible, i.e. having copies of the same tool targeted separately via the parts system?So the question is which of these you think is possible or most convenient, or if there are other ways!
Sep 30, 2021, 10:08 AM
Hey there! Before making a recommendation for how to proceed, I'm curious about your use case. What's the driving factor in wanting to have separate desks/tools for editing different document types?
Oct 6, 2021, 5:18 PM
Hello! 🙂 The point was mostly exploration of the possibilities for customizing layout in the studio. Since then, however, we’ve pretty much landed on using the desk tool with the structure builder.
We’re getting some inspiration from
sanity-super-pane , and in that context I have a couple of questions:
1. In order to use custom components in list-like panes they use what to my eyes looks like a
small (clever) hack . Do you think there is much chance of updates to the Sanity source that would render this method untenable?2. Is there a way of hiding panes completely, while still having them as a part of the structure builder under the hood?
Oct 7, 2021, 9:19 AM
Sorry it took me a bit to get back to you here! It's really unlikely that there would be any breaking changes made that make that method not work. As to hiding the panes, it's probably going to be quite a pain as there aren't any convenience methods for it. You would probably have to hack together some CSS global overrides .
Oct 8, 2021, 5:44 PM
No problem, thanks for the answer! I wonder if the global CSS override link is not right; is this the section you were thinking of or is there something else more appropriate?
Oct 10, 2021, 11:37 AM
Yep, looks like the wrong link was in my clipboard! Apologies! That is the correct link!
Oct 11, 2021, 4:39 PM
No worries, thank you!
Oct 12, 2021, 11:12 AM

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?