Remove icons from Studio top nav
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
- 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.
Show original thread6 replies
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.