PayloadCMS Revursive Block

LinkBlock.ts

import {Block} from 'payload/types';

const createRecursiveLinksBlock = (current = 0, maxDepth = 3): Block => {
  if (current < maxDepth - 1) {
    current++;
    return {
      slug: `Level ${current}`,
      fields: [
        {
          name: 'name',
          type: 'text',
        },
        {
          name: 'children',
          type: 'blocks',
          blocks: [createRecursiveLinksBlock(current)],
        },
      ],
    };
  }

  return {
    slug: `Level ${current + 1}`,
    fields: [
      {
        name: 'name',
        type: 'text',
      },
    ],
  };
};

const LinkBlock: Block = createRecursiveLinksBlock();

export default LinkBlock;

Navigations.ts

import {CollectionConfig} from 'payload/types';

import {LinkBlock} from '../blocks';

const Navigations: CollectionConfig = {
  slug: 'navigations',
  admin: {
    useAsTitle: 'name',
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'name',
      type: 'text',
    },
    {
      name: 'links',
      type: 'blocks',
      blocks: [LinkBlock],
    },
  ],
};

export default Navigations;