Does Gatsby support generating navigation/menus based on arbitrary nested directory structure?

Hi.

This is a very basic use case, but believe me, I have been looking whole evening - in docs, on stackoverflow and on google in general. Maybe I don’t know how to phrase the problem correctly.

I have some file structure of arbitrary nesting:

- folder-1
  - folder-2
    - file-1.md
    - file-2.md
- folder-3
  -file-3.md
- file-4.md

All these md files successfully generate their respective pages.

But I don’t know how to go about constructing dynamic navigation page based on this file structure, so that whenever this structure changes, the navigation page changes “by itself”:

• folder 1
  • folder 2
    • file 1
    • file 2
• folder 3
  • file 3
• file 4

Could someone point me in the right direction? Thanks in advance!!!

[mpodlasin]

@wardpeet I am ok with closing this issue.

I used yaml file do define my catalogues structure.

It’s kind of double the work, but it works and arguably has other benefits, like explicitly defining order of files.

I guess it’s just weird that in the docs it’s not clearly explained what are the good practices on creating menus and tables of contents, unless I missed something?

[JacksonMalloy]

This was my solution to dynamically generate navigation (only works 2 levels deep). Not a great solution but it works for me

Figured I’d share how I did it.

graphql query:

allFile(filter: { sourceInstanceName: { eq: "pages" }, name: { regex: "/^(?!index|404).*$/" } }) {
...
}

Logic to structure data -

export const getTreeItems = (data: { node: any }[]) => {
  // Create array of nodes
  const getBaseDirectories = (data: { node: any }[]) => {
    let baseDirectories: any[] = []

    data.forEach(({ node }) => {
      baseDirectories.push(node)
    })

    return baseDirectories
  }

  const baseDirectories = getBaseDirectories(data)

  // Set up data structure to include relativeDirs array
  const configureRelativeDirectory = () => {
    return baseDirectories.map(({ name, childMdx, relativeDirectory }) => {
      return {
        name,
        frontmatter: childMdx ? childMdx.frontmatter : null,
        relativeDir: relativeDirectory.substring(relativeDirectory.lastIndexOf('/') + 1),
      }
    })
  }

  const directoryList = configureRelativeDirectory()

  const configuredDirectoryList = directoryList.map((item, index, array) => {
    const node = array
      // Filter children matching relative directories
      .filter((child) => {
        return child.relativeDir === item.name
      })
      // Append children array to first level
      .map((firstChild) => {
        // Filter children matching relative directories
        const node = array
          .filter((child) => {
            return child.relativeDir === firstChild.name
          })
          // Append children array to second level
          .map((child) => {
            return { ...child, children: [] }
          })

        return { ...firstChild, children: node }
      })

    const newItem = { ...item, children: node }

    return newItem
  })

  const filteredDirectories = [
    { name: 'home', frontmatter: null, relativeDir: '', children: [] },
    ...configuredDirectoryList.filter((dir) => {
      // Remove copies of directorys at base level
      return !dir.relativeDir && dir.children.length
    }),
    { name: 'contact', frontmatter: null, relativeDir: '', children: [] },
  ]

  return filteredDirectories
}

Should output an array of objects with children arrays.