PageNavigation

A PageNavigation can be used to display a hierarchy of pages inside an application. It accepts a PageTree structure as its data source and will build a collapsible tree navigation from it. It generates a next/link for each page using the slugified title.

First create a new PageTree and provide items that with a title, and children.

const pageTree = new PageTree({
  items: [
    {
      title: 'First Section',
      children: [
        {
          title: 'First chapter',
          children: [
            { title: 'Page A' },
            { title: 'Page B' }
          ]
        },
        {
          title: 'Second chapter',
          children: [
            { title: 'Page C' },
            { title: 'Page D' }
          ]
        }
      ]
    },
    {
      title: 'Second Section',
      children: [
        { title: 'Page E' }
      ]
    }
  ]
});

A PageTree consists of PageTreeItems which follow the following interface:

interface PageTreeItem {
  title: string;
  keywords?: string [];
  children?: PageTreeItem [];
}

Pass this pageTree to the PageNavigation component.

<PageNavigation
  activePath=""
  pageTree={
    PageTree_PageTree {
      "basePath": "",
      "items": Array [
        Object {
          "breadcrumbs": Array [
            "First Section",
          ],
          "children": Array [
            Object {
              "breadcrumbs": Array [
                "First Section",
                "First chapter",
              ],
              "children": Array [
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "First chapter",
                    "Page A",
                  ],
                  "breadcrumbsAsString": "First Section First chapter Page A",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/first-chapter/page-a",
                  "slug": "page-a",
                  "title": "Page A",
                },
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "First chapter",
                    "Page B",
                  ],
                  "breadcrumbsAsString": "First Section First chapter Page B",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/first-chapter/page-b",
                  "slug": "page-b",
                  "title": "Page B",
                },
              ],
              "path": "/first-section/first-chapter",
              "slug": "first-chapter",
              "title": "First chapter",
            },
            Object {
              "breadcrumbs": Array [
                "First Section",
                "Second chapter",
              ],
              "children": Array [
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "Second chapter",
                    "Page C",
                  ],
                  "breadcrumbsAsString": "First Section Second chapter Page C",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/second-chapter/page-c",
                  "slug": "page-c",
                  "title": "Page C",
                },
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "Second chapter",
                    "Page D",
                  ],
                  "breadcrumbsAsString": "First Section Second chapter Page D",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/second-chapter/page-d",
                  "slug": "page-d",
                  "title": "Page D",
                },
              ],
              "path": "/first-section/second-chapter",
              "slug": "second-chapter",
              "title": "Second chapter",
            },
          ],
          "path": "/first-section",
          "slug": "first-section",
          "title": "First Section",
        },
        Object {
          "breadcrumbs": Array [
            "Second Section",
          ],
          "children": Array [
            Object {
              "breadcrumbs": Array [
                "Second Section",
                "Page E",
              ],
              "breadcrumbsAsString": "Second Section Page E",
              "keywords": undefined,
              "keywordsAsString": undefined,
              "path": "/second-section/page-e",
              "slug": "page-e",
              "title": "Page E",
            },
          ],
          "path": "/second-section",
          "slug": "second-section",
          "title": "Second Section",
        },
      ],
      "itemsFlat": Array [
        Object {
          "breadcrumbs": Array [
            "First Section",
            "First chapter",
            "Page A",
          ],
          "breadcrumbsAsString": "First Section First chapter Page A",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/first-chapter/page-a",
          "slug": "page-a",
          "title": "Page A",
        },
        Object {
          "breadcrumbs": Array [
            "First Section",
            "First chapter",
            "Page B",
          ],
          "breadcrumbsAsString": "First Section First chapter Page B",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/first-chapter/page-b",
          "slug": "page-b",
          "title": "Page B",
        },
        Object {
          "breadcrumbs": Array [
            "First Section",
            "Second chapter",
            "Page C",
          ],
          "breadcrumbsAsString": "First Section Second chapter Page C",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/second-chapter/page-c",
          "slug": "page-c",
          "title": "Page C",
        },
        Object {
          "breadcrumbs": Array [
            "First Section",
            "Second chapter",
            "Page D",
          ],
          "breadcrumbsAsString": "First Section Second chapter Page D",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/second-chapter/page-d",
          "slug": "page-d",
          "title": "Page D",
        },
        Object {
          "breadcrumbs": Array [
            "Second Section",
            "Page E",
          ],
          "breadcrumbsAsString": "Second Section Page E",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/second-section/page-e",
          "slug": "page-e",
          "title": "Page E",
        },
      ],
      "originalItem": Array [
        Object {
          "children": Array [
            Object {
              "children": Array [
                Object {
                  "title": "Page A",
                },
                Object {
                  "title": "Page B",
                },
              ],
              "title": "First chapter",
            },
            Object {
              "children": Array [
                Object {
                  "title": "Page C",
                },
                Object {
                  "title": "Page D",
                },
              ],
              "title": "Second chapter",
            },
          ],
          "title": "First Section",
        },
        Object {
          "children": Array [
            Object {
              "title": "Page E",
            },
          ],
          "title": "Second Section",
        },
      ],
    }
  }
/>

Setting the active path

Use the activePath property to define the active page within your tree. The path to this page will be expanded automatically. Once this property changes, all paths that have been expanded by the user will be closed automatically. If you are using this component from within a Next.js application, you get the activePath using the asPath property of the next/router.

<PageNavigation
  activePath="/first-section/first-chapter/page-a"
  pageTree={
    PageTree_PageTree {
      "basePath": "",
      "items": Array [
        Object {
          "breadcrumbs": Array [
            "First Section",
          ],
          "children": Array [
            Object {
              "breadcrumbs": Array [
                "First Section",
                "First chapter",
              ],
              "children": Array [
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "First chapter",
                    "Page A",
                  ],
                  "breadcrumbsAsString": "First Section First chapter Page A",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/first-chapter/page-a",
                  "slug": "page-a",
                  "title": "Page A",
                },
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "First chapter",
                    "Page B",
                  ],
                  "breadcrumbsAsString": "First Section First chapter Page B",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/first-chapter/page-b",
                  "slug": "page-b",
                  "title": "Page B",
                },
              ],
              "path": "/first-section/first-chapter",
              "slug": "first-chapter",
              "title": "First chapter",
            },
            Object {
              "breadcrumbs": Array [
                "First Section",
                "Second chapter",
              ],
              "children": Array [
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "Second chapter",
                    "Page C",
                  ],
                  "breadcrumbsAsString": "First Section Second chapter Page C",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/second-chapter/page-c",
                  "slug": "page-c",
                  "title": "Page C",
                },
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "Second chapter",
                    "Page D",
                  ],
                  "breadcrumbsAsString": "First Section Second chapter Page D",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/second-chapter/page-d",
                  "slug": "page-d",
                  "title": "Page D",
                },
              ],
              "path": "/first-section/second-chapter",
              "slug": "second-chapter",
              "title": "Second chapter",
            },
          ],
          "path": "/first-section",
          "slug": "first-section",
          "title": "First Section",
        },
        Object {
          "breadcrumbs": Array [
            "Second Section",
          ],
          "children": Array [
            Object {
              "breadcrumbs": Array [
                "Second Section",
                "Page E",
              ],
              "breadcrumbsAsString": "Second Section Page E",
              "keywords": undefined,
              "keywordsAsString": undefined,
              "path": "/second-section/page-e",
              "slug": "page-e",
              "title": "Page E",
            },
          ],
          "path": "/second-section",
          "slug": "second-section",
          "title": "Second Section",
        },
      ],
      "itemsFlat": Array [
        Object {
          "breadcrumbs": Array [
            "First Section",
            "First chapter",
            "Page A",
          ],
          "breadcrumbsAsString": "First Section First chapter Page A",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/first-chapter/page-a",
          "slug": "page-a",
          "title": "Page A",
        },
        Object {
          "breadcrumbs": Array [
            "First Section",
            "First chapter",
            "Page B",
          ],
          "breadcrumbsAsString": "First Section First chapter Page B",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/first-chapter/page-b",
          "slug": "page-b",
          "title": "Page B",
        },
        Object {
          "breadcrumbs": Array [
            "First Section",
            "Second chapter",
            "Page C",
          ],
          "breadcrumbsAsString": "First Section Second chapter Page C",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/second-chapter/page-c",
          "slug": "page-c",
          "title": "Page C",
        },
        Object {
          "breadcrumbs": Array [
            "First Section",
            "Second chapter",
            "Page D",
          ],
          "breadcrumbsAsString": "First Section Second chapter Page D",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/second-chapter/page-d",
          "slug": "page-d",
          "title": "Page D",
        },
        Object {
          "breadcrumbs": Array [
            "Second Section",
            "Page E",
          ],
          "breadcrumbsAsString": "Second Section Page E",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/second-section/page-e",
          "slug": "page-e",
          "title": "Page E",
        },
      ],
      "originalItem": Array [
        Object {
          "children": Array [
            Object {
              "children": Array [
                Object {
                  "title": "Page A",
                },
                Object {
                  "title": "Page B",
                },
              ],
              "title": "First chapter",
            },
            Object {
              "children": Array [
                Object {
                  "title": "Page C",
                },
                Object {
                  "title": "Page D",
                },
              ],
              "title": "Second chapter",
            },
          ],
          "title": "First Section",
        },
        Object {
          "children": Array [
            Object {
              "title": "Page E",
            },
          ],
          "title": "Second Section",
        },
      ],
    }
  }
/>

Searching for pages

A search bar can be enabled to quickly search inside a page tree. This search will use the pageTree as data source and query title, keywords and the breadcrumbs of a page.

<PageNavigation
  activePath="/first-section/first-chapter/page-a"
  pageTree={
    PageTree_PageTree {
      "basePath": "",
      "items": Array [
        Object {
          "breadcrumbs": Array [
            "First Section",
          ],
          "children": Array [
            Object {
              "breadcrumbs": Array [
                "First Section",
                "First chapter",
              ],
              "children": Array [
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "First chapter",
                    "Page A",
                  ],
                  "breadcrumbsAsString": "First Section First chapter Page A",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/first-chapter/page-a",
                  "slug": "page-a",
                  "title": "Page A",
                },
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "First chapter",
                    "Page B",
                  ],
                  "breadcrumbsAsString": "First Section First chapter Page B",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/first-chapter/page-b",
                  "slug": "page-b",
                  "title": "Page B",
                },
              ],
              "path": "/first-section/first-chapter",
              "slug": "first-chapter",
              "title": "First chapter",
            },
            Object {
              "breadcrumbs": Array [
                "First Section",
                "Second chapter",
              ],
              "children": Array [
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "Second chapter",
                    "Page C",
                  ],
                  "breadcrumbsAsString": "First Section Second chapter Page C",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/second-chapter/page-c",
                  "slug": "page-c",
                  "title": "Page C",
                },
                Object {
                  "breadcrumbs": Array [
                    "First Section",
                    "Second chapter",
                    "Page D",
                  ],
                  "breadcrumbsAsString": "First Section Second chapter Page D",
                  "keywords": undefined,
                  "keywordsAsString": undefined,
                  "path": "/first-section/second-chapter/page-d",
                  "slug": "page-d",
                  "title": "Page D",
                },
              ],
              "path": "/first-section/second-chapter",
              "slug": "second-chapter",
              "title": "Second chapter",
            },
          ],
          "path": "/first-section",
          "slug": "first-section",
          "title": "First Section",
        },
        Object {
          "breadcrumbs": Array [
            "Second Section",
          ],
          "children": Array [
            Object {
              "breadcrumbs": Array [
                "Second Section",
                "Page E",
              ],
              "breadcrumbsAsString": "Second Section Page E",
              "keywords": undefined,
              "keywordsAsString": undefined,
              "path": "/second-section/page-e",
              "slug": "page-e",
              "title": "Page E",
            },
          ],
          "path": "/second-section",
          "slug": "second-section",
          "title": "Second Section",
        },
      ],
      "itemsFlat": Array [
        Object {
          "breadcrumbs": Array [
            "First Section",
            "First chapter",
            "Page A",
          ],
          "breadcrumbsAsString": "First Section First chapter Page A",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/first-chapter/page-a",
          "slug": "page-a",
          "title": "Page A",
        },
        Object {
          "breadcrumbs": Array [
            "First Section",
            "First chapter",
            "Page B",
          ],
          "breadcrumbsAsString": "First Section First chapter Page B",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/first-chapter/page-b",
          "slug": "page-b",
          "title": "Page B",
        },
        Object {
          "breadcrumbs": Array [
            "First Section",
            "Second chapter",
            "Page C",
          ],
          "breadcrumbsAsString": "First Section Second chapter Page C",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/second-chapter/page-c",
          "slug": "page-c",
          "title": "Page C",
        },
        Object {
          "breadcrumbs": Array [
            "First Section",
            "Second chapter",
            "Page D",
          ],
          "breadcrumbsAsString": "First Section Second chapter Page D",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/first-section/second-chapter/page-d",
          "slug": "page-d",
          "title": "Page D",
        },
        Object {
          "breadcrumbs": Array [
            "Second Section",
            "Page E",
          ],
          "breadcrumbsAsString": "Second Section Page E",
          "keywords": undefined,
          "keywordsAsString": undefined,
          "path": "/second-section/page-e",
          "slug": "page-e",
          "title": "Page E",
        },
      ],
      "originalItem": Array [
        Object {
          "children": Array [
            Object {
              "children": Array [
                Object {
                  "title": "Page A",
                },
                Object {
                  "title": "Page B",
                },
              ],
              "title": "First chapter",
            },
            Object {
              "children": Array [
                Object {
                  "title": "Page C",
                },
                Object {
                  "title": "Page D",
                },
              ],
              "title": "Second chapter",
            },
          ],
          "title": "First Section",
        },
        Object {
          "children": Array [
            Object {
              "title": "Page E",
            },
          ],
          "title": "Second Section",
        },
      ],
    }
  }
  showSearchBar={true}
/>