Modifying Studio top nav in Sanity using custom components and plugins

6 replies

Last updated: Feb 17, 2022

How would I go about removing the icons from the Studio top nav?

AI Update

To remove icons from the Studio top navigation, you'll need to create a custom navbar component using Sanity Studio's component customization API. Here's how:

The Studio allows you to override the default navbar by providing a custom component in your configuration. You can use the studio.components property in your sanity.config.js file:

// sanity.config.js
import {defineConfig} from 'sanity'

// Custom navbar component
function CustomNavbar(props) {
  // You can either:
  // 1. Return null to hide the navbar entirely
  // 2. Use renderDefault with modified props
  // 3. Build your own navbar from scratch
  
  return props.renderDefault(props)
}

export default defineConfig({
  // ...rest of config
  studio: {
    components: {
      navbar: CustomNavbar,
    },
  },
})

Approaches to Remove Icons

Option 1: Use CSS to hide specific icons The simplest approach is to use custom CSS to hide the icons you don't want:

function CustomNavbar(props) {
  return (
    <div className="custom-navbar">
      <style>{`
        .custom-navbar [data-ui="IconButton"] {
          display: none;
        }
      `}</style>
      {props.renderDefault(props)}
    </div>
  )
}

Option 2: Build a minimal navbar Create your own navbar component that only includes what you need. You can reference the default navbar structure and selectively include elements.

Option 3: Use renderDefault with filtered children Intercept and modify the navbar's rendered output to remove specific elements before they're displayed.

Important Notes

The navbar customization uses a middleware pattern, so calling renderDefault(props) renders the default navbar with any modifications you've made to the props
If you completely replace the navbar without calling renderDefault, you'll break the middleware chain, which might affect plugins
You can access Sanity UI components to build your custom navbar

For more detailed information, check out the Studio Components documentation and the Studio Components API reference.

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:

{
      "implements": "part:@sanity/default-layout/tool-switcher",
      "path": "./pathtocomponent/MyToolSwitcher"
    }

then in your custom component, this example is using buttons:

import React from 'react'

export default function MyToolSwitcher(props) {

  return (
    <div>
      {props.tools.map((tool) => (
        <button>{tool.title || tool.name}</button>
      ))}
    </div>
  )
}

and now they’re buttons:

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:

{
      "implements": "part:@sanity/default-layout/tool-switcher",
      "path": "./pathtocomponent/MyToolSwitcher"
    }

then in your custom component, this example is using buttons:

import React from 'react'

export default function MyToolSwitcher(props) {

  return (
    <div>
      {props.tools.map((tool) => (
        <button>{tool.title || tool.name}</button>
      ))}
    </div>
  )
}

and now they’re buttons:

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.

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.

Thanks

user U

for looking into this!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo

Modifying Studio top nav in Sanity using custom components and plugins

Customizing the Navbar

Approaches to Remove Icons

Important Notes

Sanity – Build the way you think, not the way your CMS thinks

Was this answer helpful?