I tried to implement the Ui design has a nav menu with a clinic tab and a Lab tab I want to render the clinic and lab on the same page but with different components. like, React routing or component rendering.
Hey @Saleh,
I’m not sure I understand what you’re trying to do. Could you record a short video showing us by any chance?
thank you for responding,
what I’m trying to do is render the Requests list component from the notification view without using a new page
Ok, you could create a workflow on click of the nav menu to update a variable and use that variable to determine if the display property on each section should be on or off.
That said, I don’t know React but I don’t think it’s what you had in mind and it wouldn’t be my recommended approach because your page might become very heavy with all that information on one page.
I would recommend using an instance of the nav menu on multiple pages and having one page per content.
Not sure if you know but, when you publish a WeWeb app, we publish a standard Vue.js Single-Page Application, so you could have the clinic and lab contents on two separate pages (with two separate URLs) but with the same nav menu. It would look like it’s on the same page like in your GIF because the nav menu would not be reloaded, only the new lab content would be loaded.
To use that SPA functionality, you can go to “Multi-page sections”, drag and drop the nav menu on a different page and choose “Create an instance”:
The app performance and user experience will be better with this approach than if you had everything on the same page.
Does that make sense?
"
we publish a standard Vue.js Single-Page Application
",
acutely that is what I want,
Thank you so much for your help 
1 Like
Awesome! Glad I could help 
1 Like
Hi Joyce. Coming to WeWeb as a Bubble user, we would generally use URLs as a way to do this. So we would have a workflow when the user clicks an option which navigates to the same page but adds a path to the URL eg myapp/dashboard, myapp/customers etc. Bubble wouldn’t refresh the page, as it’s pointing to the same page, but it will fire a Page Loaded event, we can then read the URL path and decide which sections on the page (groups in Bubble parlance) to show and hide. Can we do something similar using URLs in WeWeb rather than using variables and/or multiple pages and having to repeat sections on each page for each section we want to show? URLs are useful as they let the user click the back and forward buttons in the browser or use a link directly to the section of the app they want.
Having done some VueJS (V2) development in a former life, I suppose it’s the equivalent of routing, where you have the core parts of the page in components on the top-level page, and the parts of the page that will change dependent on user action would go through the router for Vue to determine which component is shown.
I hope that makes sense. Many thanks in advance for your advice.
Hi @Gazinhio 
You could do it with query strings (so it would look like this /url?query-parameters) but what I described above (having multiple pages with multi-page sections) is the approach we recommend if you want a true SPA behavior.
When you have multiple pages with the same navigation menu and filter section for example, WeWeb doesn’t reload the page when the user navigates from one page to another. Only the content that is unique to the destination page is loaded. We handle the Vue routes for you natively.
It may be a bit confusing at first coming from Bubble because it’s a different approach but it’s closer to how you would code it and avoids the confusion with the CSS display property and conditional rendering.
I explain it a bit more in depth in this video.
Does that help?