Best Practices for Creating Navigation

General
1

Hi-

I am working on designing a large website for a hospital that has thousands of pages that are organized in a heirarchy. As such they have a common header with multi-level navigation that appears on every page and I am looking for best practices on how to model this in builder.io. Here are some options I have considered:

1.) Create a structured data type called Navigation that has multi level lists that include link labels and url’s that can be used to generate the navigation. This is pretty straight forward to do but could be error prone as if pages get renamed the links will break and a user might not know about it. Also creating variations of this could be complex as it could require a lot of content entry

2.). Write dynamic code in getStaticProps that recurses all of the pages in the system from a specific starting point or query and builds the navigation tree using custom fields added to each page

Please advise if there are any other options / best practices with builder.io that I should consider.

Thanks,
John

2

Hello jhs129,

I may be able to suggest some strategies for maintaining an up-to-date Navigation component.

I believe the following documentation may be directly related to the structure you’re looking to implement: Navigation Links | Builder.io Blueprints.
I believe the links will remain up to date even after renamed.

  1. Data Model for Navigation:
    Data Models - Builder.io
  • Creating a data model specifically for navigation is a common practice as it provides a structured way to manage navigation links. Using custom fields for link labels and URLs is straightforward, but you might address the potential for broken links by setting up validations or checks when content is updated.
  • You can also utilize targeting features and A/B testing for different navigation versions. This way, you can dynamically adjust navigation based on user attributes or site sections.
  1. Dynamic Navigation using getStaticProps:
  • You can also use Builder’s Content API to fetch and update the navigation data.

Please let me know if there is something specific you had in mind that I may not have addressed.

3

Julius-

Thanks for the note. Do you have any examples of how you might handle broken links by checking when content is updated? I’m particularly concerned of the scenario wher e the navigation-links content has a reference to a url in builder but then that page gets moved or renamed. In other systems they use a reference to a GUID that doesn’t change and you render the href on the fly when content is published. How would you handle this scenario in builder?

Thanks,
John

4

Hi John,

I think the best structure to avoid this type of disconnect between elements on the page and page links is to dynamically generate the page links. You can do this using dynamic binding: Data Binding - Builder.io
In this way you can generate the nav links visually on the page only if they exist.
Does this directly address your concern?

5

Thanks Julius. Yes it does.