Joint session with Vercel: How to build intelligent storefronts (May 15th)

Remove icons from Studio top nav

6 repliesLast updated: Nov 29, 2025

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:

Customizing the Navbar

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

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

Show original thread
6 replies

Was this answer helpful?

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.

Related contributions