Navigation bar for all pages?

Hello WeWeb community,

What’s the best way to have the same navigation bar on all pages?

Would it just be to copy and paste to each new page I create/ save it to the Project UI Kit?

Or is there a way to set it as a template for all pages?

Hi @Gene !

That’s a good point. As this was an issue for me as well I have instead been making single page applications. A top bar, a side bar navigation and the main “body” page. Clicking the sidebar navigation simply hides or un-hides different sections using a formula and that has been working quite well for me.

I am pretty good with WeWeb now, but I still wonder if something akin to Figma’s components is possible with WeWeb’s editor. For my current project I required a particular style which kind of forced me to copy/paste the same sidebar on every section. When I make a change on the sidebar, I need to copy and paste the latest version into all the sections I made and delete the older sidebar element to reflect the changes.

I would be great if we could design an element, and paste it responsively everywhere in the app, and making changes on the core template element is to be reflected on all the clones like in Figma etc…

Good news! They are well aware and this feature is actually planned already :smile:
See https://feedback.weweb.io/ for the current road map!

@aeynaud I think I figured it out (looks like we can do this already.)

When you click on the Add + menu, you’ll see “multi page sections” under the project section. So if you drag one of those sections (like a nav bar for example…) and you “create an instance” of it, rather than copy it, then it will be another instance of the same nav bar (i.e. if you change something in the original one, it will change it on the other instances also.)

Here are some screenshots. And if i’m misunderstanding anything, feel free to let me know :slight_smile:


4 Likes

@Joyce How do we manage the assets in the Project UI Kit? I don’t see a way to delete an old UI asset that I saved for example…

@Gene I take back my statement about being pretty alright with WeWeb now. That’s exactly what I was talking about and looking for, thanks for that!

1 Like

@Gene , you got it exactly right with the multi-page sections. As @aeynaud saw on the public roadmap, we’re working on re-usable components so you can do something similar with elements but, for now, you can already re-use sections across your app. When you choose to create an instance, the changes you make in one instance will apply to all.

Re deleting an old UI asset, that’s an excellent question! I don’t know. Let me find out :grinning:

Here you go:
CleanShot 2023-02-02 at 10.56.15

You can manage UI assets at workspace level in your Dashboard > Design systems

@Joyce Thnx!

1 Like