What are best practices to build a more complex navigation for multi-page apps?

App Building
1

Hi,

I want to build a multi-page app with a bit more complex navigation. Are there any best practices on how to do it?

I searched here and the documentation and could not find much information.

I attached a screenshot below. The idea is to have 2 levels of headers, and multiple sidebars, based on the selections in the headers. E.g. you select "Header1-2" and "Header2-4", then you get "Sidebar2" displayed, where you can select the actual app.

How would you build the navigation? I tried it with localStorage, variables and query parameters / hash in the URL (Store temporary data with variables and localStorage | Retool Docs) but would like to know what is best. Query parameters and the hash values seem to have downsides when I use it with modules.

My plan is to build each navigation item in a module, then build one overall module with all the navigation modules and then build the apps with the overall module. Any downsides in doing it like that?

image
image1236×360 14.6 KB

Thanks for the help :slight_smile:

2

Hello @micha

I am new to retool but I think you can just hide or show the options in the sidebar based on the header you select.
Do this for the header options.

Header 1

image
image1519×550 65.1 KB

Header 2

image
image1459×592 65.6 KB

Do this for the sidebar menu option
Edit the sidebar option you want to show when header 1 is selected

image
image1508×485 53.4 KB

Edit the sidebar option you want to show when header 2 is selected

image
image1526×467 51.3 KB

Also if you want, you can just show or hide the desired sidebar if you want to use multiple sidebar.

Hope this helps.

3

Thanks, I know the hiding part already :slight_smile:
My question is more about what the hiding should be based on, to preserve state and make it work in a modular way.

I think I can make it work, but it does not seem very elegant. It feels like query parameters are a good way (and nice for the user as well), but its complicated to set this up in the modular setup I want / think makes sense.

Therefore the question about best practices.

4

Hi @micha! Sorry to hear you are experiencing difficulties building more complex apps. We're currently working on multipage apps, which will make building these apps easier. I think your use case might be a bit complex still, but I'm sure we can figure a way out. I'll update this thread when we're ready for early users!

3 Likes