Navigation Migration

This guide explains how to migrate existing configurations that used topNavigation, sidebar and customPages to the new unified navigation configuration introduced in vNEXT.

Overview

Navigation is now configured through a single navigation array. Items at the root level become top navigation tabs, while nested categories automatically form the sidebar. Custom pages are added using the custom-page item type.

Before and After

Before(tsx)
 
const config: ZudokuConfig = {
  topNavigation: [
    { id: "docs", label: "Docs" },
    { id: "api", label: "API" },
  ],
  sidebar: {
    docs: [{ type: "doc", id: "introduction" }],
  },
  customPages: [{ path: "/playground", render: Playground, prose: false }],
  apis: {
    type: "file",
    input: "./openapi.json",
    navigationId: "api",
  },
};

After(tsx)
 
const config: ZudokuConfig = {
  navigation: [
    {
      type: "category",
      label: "Docs",
      items: ["introduction"],
    },
    {
      type: "custom-page",
      path: "/playground",
      element: <Playground />,
    },
    {
      type: "link",
      to: "api",
      label: "API",
    },
  ],
  apis: [
    {
      path: "/api",
      type: "file",
      input: "./openapi.json",
    },
  ],
};

Migration steps