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