Horizontal top navigation for document types: customization approaches

Looking at your question about customizing Sanity Studio with a horizontal top navigation, I can provide guidance on each of your proposed approaches based on the current Sanity Studio v3 architecture.

Option 1: Create New Tools for Each Document Type

This is definitely feasible and aligns well with Studio v3's architecture. According to the custom Studio tool documentation, you can create custom tools that appear in the horizontal top navigation by default.

Advantages:

• Full control over the UI and layout
• Tools naturally appear horizontally in the Studio header
• Clean separation of concerns

Challenges:

• You'll need to implement document editing functionality yourself
• Unfortunately, there isn't a simple way to import just the document editing panel from the desk tool as a reusable component. The desk tool's DocumentPane isn't exported as a standalone component you can easily reuse with all its state handling

However, you can leverage Studio's hooks like useDocumentOperation, useEditState, and form-building components from the Form Components API to build your own editing interfaces without starting completely from scratch.

Option 2: Customize the Desk Tool

This is possible but limited. The Structure Builder allows you to customize the left sidebar extensively, but:

• The desk tool's panes are designed to work vertically (sidebar → list → document)
• Styling the leftmost pane to look like a top navigation would require significant CSS overrides and might break responsive behavior
• Hiding the default Studio header would remove important functionality (search, user menu, tool switcher)

This approach would likely be fighting against the framework's intended design patterns.

Option 3: Multiple Structure Tool Instances

This is absolutely possible and is likely your best solution! According to the Studio Tools documentation and the configuration API, you can include multiple instances of the structure tool with different configurations.

Here's how:

import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {DocumentIcon, DocumentsIcon} from '@sanity/icons'

export default defineConfig({
  // ... other config
  plugins: [
    structureTool({
      name: 'posts-tool',
      title: 'Posts',
      icon: DocumentIcon,
      structure: (S) =>
        S.list()
          .title('Posts')
          .items([
            S.documentTypeListItem('post')
          ])
    }),
    structureTool({
      name: 'pages-tool',
      title: 'Pages',
      icon: DocumentsIcon,
      structure: (S) =>
        S.list()
          .title('Pages')
          .items([
            S.documentTypeListItem('page')
          ])
    }),
    // Add more as needed
  ],
})

Each tool instance will appear as a separate button in the horizontal top navigation, and you can customize what each one displays using the Structure Builder API.

Recommendation

Option 3 (Multiple Structure Tool Instances) is your best bet because:

1. ✅ Achieves horizontal top navigation naturally
2. ✅ Reuses all the desk tool's document editing functionality
3. ✅ Requires minimal custom code
4. ✅ Maintains Studio's responsive behavior and built-in features
5. ✅ Each tool can have its own icon, title, and structure

You can combine this with custom Studio Components if you need to customize the navbar further, or hide specific UI elements using the studio configuration's components property.

If you need even more customization beyond what multiple structure tools provide, then Option 1 (custom tools) would be the next step, but you'd need to build more of the editing UI yourself using Studio's form components and hooks from the hooks API.