Sidebar styling across apps

Hey folks,

Not sure why I've been struggling with this so much but looking for input because I can't find best practices here.

I have multi-app admin tool built in retool and I want to create a consistent sidebar navigation menu across all the apps. Building the navigation module is easy and works great, but to add it to a sidebar, I have to add the sidebar to each individual app, then update the styles, then update the logo at the top, and generally sort of manually re-set up the sidebar every time a create a new app.

Heaven forbid I ever need to change the icon or color scheme, because then I'd need to go to every single app and go to the sidebar styling and change every one of the attributes that I'd set up again.

Is there any way to have a consistent sidebar across apps? One that has the same look and feel throughout the experience without having to manually copy settings every time I create a new app?

1 Like

You can use a module and add Navigation component to it

And then select that module and drag it into each app

Screenshot 2023-07-28 at 11.30.51 AM

  • so you only need to manage the module itself and it will change across all apps and also save automatically - no need to publish it so be careful

So then is the suggestion to always keep all styling inside the nav module? Not using the header or footer or styling elements for the sidebar itself?

Yes, but you don't need the sidebar at all just the module

That works but then I have to wonder - what's the point of even having the sidebar as a part of the app builder?

Same doubt here

Hi all! Thanks for this great feedback. As Scott mentioned, modules are the current solution for repeatable code (definitely try to add any styling there if you can since it'll update in all apps that use the module.

Alternatively, you could create several components in a sidebar in one app & then bulk copy + paste them over to other apps as needed. This approach, is trickier to maintain as you'd have to make any changes across every app individually.

As for why we created the sidebar, it does have a few unique benefits -

1) The Sidebar frame is optimized for mobile.

2) It's separate from the main canvas and has it's own settings.

3) It has a fixed size & position

There is still more work for us to do to make it easier (and faster) to create & scale Retool apps with consistent design and default settings. It would be awesome to be able to import a template sidebar into each app and only add extra styling if needed. It's something we've definitely talked about internally, and I hope we can share some exciting updates on this in the future!

Thanks, Tess. Excited to see what updates come down the pipe. Love the sidebar concept, just don't love having to recreate it in every new app.

1 Like

You can refer these to topic to modify css and save it in organization level preload CSS.
it will apply css to all apps of you organization.

1 Like