payload-page-tree
Nested page addresses from Payload folders, with a visual tree.
Your folder structure becomes your page addresses.
Generate hierarchical page slugs from Payload’s built-in folders. Manage the structure in a visual tree while keeping routing in your frontend.
pnpm add @delmaredigital/payload-page-treeStart with your existing Payload app.
These files show the integration points. Follow the installation guide for peers and the full documentation for the remaining application setup.
import { buildConfig } from 'payload'
import { pageTreePlugin } from '@delmaredigital/payload-page-tree'
import { Pages } from './collections/Pages'
export default buildConfig({
collections: [Pages],
plugins: [pageTreePlugin()],
})import type { CollectionConfig } from 'payload'
export const Pages: CollectionConfig = {
slug: 'pages',
fields: [
{ name: 'title', type: 'text', required: true },
{ name: 'slug', type: 'text', required: true, unique: true, index: true },
],
}What it does
- Folder-based addresses
- Combine a folder path with a page segment to generate each slug.
- A visual page tree
- The plugin registers its tree view at /admin/page-tree.
- Collection detection
- pageTreePlugin() detects pages and posts collections when they exist.
- Managed page fields
- The plugin adds folder, pageSegment, sortOrder and slugHistory fields.
- Collection access rules
- Tree operations run as the requesting user with overrideAccess: false.
- Endpoint access gate
- An access callback gates every tree endpoint; the default requires an authenticated user.
When to use it
- Your site has nested addresses such as /services/web-design.
- Editors should organise pages in folders and see the resulting structure.
- You want tree actions governed by your Payload collection access rules.
Compatibility
| Payload / admin UI / Next adapter | >=3.0.0 |
|---|---|
| Next.js | >=14.0.0 || >=15.0.0 || >=16.0.0 |
| React | >=18.0.0 || >=19.0.0 |
| Node.js | ^18.20.2 || >=20.9.0 |
| Collection requirement | A plain text slug field; do not use Payload’s slugField() helper. |
Questions before you install
Does it create the slug field?
Your collection must define its own plain text slug field. The plugin makes it read-only and manages its value through hooks.
Does it provide frontend routing?
Your frontend handles routing. Join the route segments and query your collection’s slug field to find the matching page.
Who can use the tree endpoints?
An authenticated Payload user passes the default endpoint gate. Every operation also enforces the page and folder collections’ access rules. Set access to add your own endpoint gate.