Modifying Studio top nav in Sanity using custom components and plugins
6 replies
Last updated: Feb 17, 2022
L
How would I go about removing the icons from the Studio top nav?
Feb 16, 2022, 7:30 PM
J
so, I’ve never tried this before with an existing node module component
I did find a previous discussion note on this. The idea here is to modify the top nav itself as a custom component, then set the desired tweaks within that. Note: this example does take a good bit of extra work beyond this snippet to make sure the mobile view hamburger appears correctly. But maybe this example can set you on the right path:
in sanity.json “parts” define the default layout part:
then in your custom component, this example is using buttons:
and now they’re buttons:
I did find a previous discussion note on this. The idea here is to modify the top nav itself as a custom component, then set the desired tweaks within that. Note: this example does take a good bit of extra work beyond this snippet to make sure the mobile view hamburger appears correctly. But maybe this example can set you on the right path:
in sanity.json “parts” define the default layout part:
{
"implements": "part:@sanity/default-layout/tool-switcher",
"path": "./pathtocomponent/MyToolSwitcher"
}import React from 'react'
export default function MyToolSwitcher(props) {
return (
<div>
{props.tools.map((tool) => (
<button>{tool.title || tool.name}</button>
))}
</div>
)
}Feb 16, 2022, 11:38 PM
J
so, I’ve never tried this before with an existing node module component
I did find a previous discussion note on this. The idea here is to modify the top nav itself as a custom component, then set the desired tweaks within that. Note: this example does take a good bit of extra work to make sure the mobile view hamburger appears correctly. But maybe this example can set you on the right path:
in sanity.json “parts” define the default layout part:
then in your custom component, this example is using buttons:
and now they’re buttons:
I did find a previous discussion note on this. The idea here is to modify the top nav itself as a custom component, then set the desired tweaks within that. Note: this example does take a good bit of extra work to make sure the mobile view hamburger appears correctly. But maybe this example can set you on the right path:
in sanity.json “parts” define the default layout part:
{
"implements": "part:@sanity/default-layout/tool-switcher",
"path": "./pathtocomponent/MyToolSwitcher"
}import React from 'react'
export default function MyToolSwitcher(props) {
return (
<div>
{props.tools.map((tool) => (
<button>{tool.title || tool.name}</button>
))}
</div>
)
}Feb 16, 2022, 11:38 PM
J
note: the studio is yours to tweak out, but as always this comes with the advice that you should make a fresh copy of your repo and work in a non-production branch to prevent making breaking changes.
Feb 16, 2022, 11:43 PM
J
on first glance, I thought this suggestion may be ‘too much’, but with the current parts and plugin systems and considering v3 is going to make big changes to how parts work in the near future (I don’t have details on this yet)… But if you’d like to tweak text and icons for plugin appearances in the studio top nav without having to mod mobile views, it might actually be easier to import and modify plugins like dashboard and vision to change the displayed text and icon - and then use override styles to further change fonts, sizes and colors.
Feb 17, 2022, 1:18 AM
J
on first glance, I thought this suggestion may be ‘too much’, but with the current parts and plugin systems and considering v3 is going to make big changes to how parts work in the near future (I don’t have details on this yet)… But if you’d like to tweak text and icons for plugin appearances in the studio top nav without having to mod mobile views, it might actually be easier to import and modify plugins like dashboard and vision to change the displayed text and icon - and then use override styles to further change fonts, sizes and colors.
Feb 17, 2022, 1:18 AM
L
Thanks
user U
for looking into this!Feb 17, 2022, 5:23 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.