Update creating-dynamically-rendered-navigation.md

[outofthisworld]

Hopefully this is what you guys were thinking, if not I can re-write it! :)

[pieh]

That's great start, now we need to iterate on it.

/cc @shannonbux

[shannonbux]

Thanks, @outofthisworld for writing this! This has been a requested document for a while! Just made a few minor formatting suggestions.

@davidluhr, I thought you might be interested in giving feedback here since I believe you requested this stub article in the first place!

[outofthisworld]

@shannonbux No worries, going to be using Gatsby for my blog so just paying my dues 👍 I have some free time over the next week so I was thinking about writing some more docs based on the stubs.
Is there anywhere with notes/outlines/discussions as to what should definitely be in each of the remaining stubs or shall I just do my best based off of the titles?

[davidluhr]

@shannonbux Thanks for looping me in!

@outofthisworld Thank you very much for putting this all together! This will be very helpful for maintaining a navigation menu from a centralized location.

What originally spurred the request for this guide was the need to dynamically generate navigation based on the filesystem. I've worked on quite large websites (thousands of pages) in the past that require several layers of navigation menus, making it nearly impossible to manually build and maintain menus for each content area of the site. For example, while the global navigation might remain quite stable, once a user navigates into a specific content area, a sidebar navigation showing all nested sub pages is needed.

The central challenge I originally encountered was querying the filesystem for all .js page files to dynamically render a navigation based on the site architecture, with the added challenge of detecting which "level" of the site's information architecture a particular page lives in. Following the above example, there might be a sidebar menu that displays the current page and all its child routes, indented by level, that automatically updates as the site's page structure changes.

The closest thing I've seen to this is sidebar navigation on documentation websites such as ReactJS.

However, I've only seen this done with .md files, and not .js pages, which many content-rich websites would rely on.

The relatively new gatsby-transformer-javascript-frontmatter plugin would probably help make this possible, but there are still large unknowns on my end.

With this in mind, would it make sense to rename @outofthisworld's very helpful guide so it doesn't have to tackle this challenge? The guide in this PR is great for users who are seeking a way to centrally maintain a navigation list, and I don't want to bog it down.

Thoughts?

[outofthisworld]

@davidluhr Ahhh I see 👍 That definitely does sound like a very helpful guide! Maybe this could fit somewhere else, if not no worries all part of process :) I think I have an idea on how to achieve the original request, quite similar to how some sites dynamically generate their breadcrumbs by knowing the context the page is within. Ill start writing a draft in the morning and let everyone know how it goes.

[shannonbux]

@davidluhr thanks for the details and @outofthisworld I think we probably need both this doc and the one David is suggesting. Let me loop in a few people for ideas on titles: @KyleAMathews what titles should we use here? These titles seem too long to me haha. Trying to think of how to title these: Current PR doc could be retitled: maintaining a navigation menu from a centralized location New PR (to address @davidluhr's request earlier in this thread) called: dynamically render a navigation based on the site architecture / filesystem

…

On Tue, Sep 4, 2018 at 10:02 AM, outofthisworld ***@***.***> wrote: @davidluhr <https://github.com/davidluhr> Ahhh I see 👍 That definitely does sound like a very helpful guide! Maybe this could fit somewhere else, if not no worries all part of process :) I think I have an idea on how to achieve the original request, quite similar to how some sites dynamically generate their breadcrumbs by knowing the context the page is within. Ill start writing a draft in the morning and let everyone know how it goes. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7823 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Ae9o2qKMJrS3hpmZKW0Pabhw9hoAHM6oks5uXqQRgaJpZM4WXXBT> .

[outofthisworld]

@shannonbux Regarding the names being to long I agree, my thoughts for the title on this doc would be Keeping your sites navigation maintainable/centralised. I think the doc does illustrate some concepts that would definitely be handy for beginners to Gatsby. As for the doc @davidluhr suggested my suggestion would be Render a sidebar navigation dynamically but I will leave that to you guys to find something fitting 👍

[davidluhr]

@outofthisworld That sounds great! Good call on referencing breadcrumb implementations that use the page's context.

Not sure if this is relevant, but Gatsby v2 uses Reach Router, which allows for "Relative Links". This might be handy for rendering a sidebar navigation within a specific route and only requiring a relative path to the corresponding subpages.

Excited to see your work on this!

[shannonbux]

Ok let's call this one Centralizing your site's navigation and change the stub article title to rendering sidebar navigation dynamically and then I can merge this!

And then it'd be worth considering @davidluhr's idea about using reach-router for a next iteration of this doc or a future doc.

[davidluhr]

@shannonbux Sounds great! Thanks to @outofthisworld for these great contributions!

[outofthisworld]

@shannonbux I have renamed the title and created a new stub file called Rendering sidebar navigation dynamically. Should be good for a merge and then when I find the time I can update the other stub on a different branch 👍

[shannonbux]

Great, thanks @outofthisworld--excellent work! And thanks for the input, @davidluhr!