The Presentation tool

// sanity.config.ts
// ...all other imports
import { presentationTool } from 'sanity/presentation'

export default defineConfig({
  // ... all other config settings
  plugins: [
    // ...all other plugins
    presentationTool({
      previewUrl: {
        origin: 'https://my-cool-site.com',
        previewMode: {
          enable: '/api/draft-mode/enable',
          disable: '/api/draft-mode/disable',
        },
      },
    }),
  ],
})

// ./lib/presentation/resolve-production-url.ts
import {defineLocations} from 'sanity/presentation'

export default defineLocations({
  // Map document types to frontend routes
  product: {
    select: {title: 'title', slug: 'slug.current'},
    resolve: (doc) => ({
      locations: [
        {title: doc.title, href: `/products/${doc.slug}`},
        {title: 'Products Index', href: `/products`},
      ],
    }),
  },
  // ...
})

import {defineConfig} from 'sanity'
import {presentationTool} from 'sanity/presentation'
import resolveProductionUrl from './lib/presentation/resolve-production-url'

export default defineConfig({
  // ...
  plugins: [
    presentationTool({
      resolve: resolveProductionUrl,
      previewUrl: {
        origin: 'https://my-cool-site.com',
        previewMode: {
          enable: '/api/draft-mode/enable',
          disable: '/api/draft-mode/disable',
        },
      },
    }),
  ],
})

// Import your custom navigator component
import {NavigatorComponent} from './presentation/NavigatorComponent'

export default defineConfig({
  // Your configuration for the project
  // ...

  plugins: [
    presentationTool({
      // ...
      component: {
  			// Pass the custom component to the plugin
        unstable_navigator: NavigatorComponent
      },
    })
  ],
})