# SPA Navigation best practice **URL:** \ **Category:** Ask us anything\ **Created:** [January 9, 2024, 7:39am UTC](https://community.weweb.io/t/spa-navigation-best-practice/6278 "2024-01-09T07:39:11Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.weweb.io/u/rory)\ **Post date:** [January 9, 2024, 7:39am UTC](https://community.weweb.io/t/spa-navigation-best-practice/6278/1 "2024-01-09T07:39:11Z")
What’s considered best practice for handling navigation in a Single Page App. I have multiple sections that can show / hide based on boolean variables being triggered but I think it’d be more useful to show / hide based on a single variable value. in my current setup, I have multiple booleans like as follows: “Section1” = true “Section2” = false “Section3” = false etc. If I had a single variable called navigation is set to “Section1”, then only Section1 is visible and the other sections wouldn’t render. I’d rather the text “Section1” to be a dropdown option from a list instead of manually writing “Section1” in to the workflow in case I want to rename them later. ---
**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\ **Post date:** [January 9, 2024, 11:15am UTC](https://community.weweb.io/t/spa-navigation-best-practice/6278/2 "2024-01-09T11:15:14Z")
You should take a look at our Multipage sections, they will not re-render when switching pages with the same sections ---
**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.weweb.io/u/rory)\ **Post date:** [January 9, 2024, 11:49am UTC](https://community.weweb.io/t/spa-navigation-best-practice/6278/3 "2024-01-09T11:49:34Z")
Thanks for replying @luka. Are you suggesting that the best approach is to use different pages with the same ‘multi-page sections’, and the components can be hidden/shown based on whatever page is active? ---
**Author:** ![Dominic](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dominic/32/5645_2.png) [@Dominic](https://community.weweb.io/u/Dominic)\ **Post date:** [January 9, 2024, 12:43pm UTC](https://community.weweb.io/t/spa-navigation-best-practice/6278/4 "2024-01-09T12:43:03Z")
Hi @luka is this also true for modals and sidebars? ---
**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\ **Post date:** [January 9, 2024, 12:56pm UTC](https://community.weweb.io/t/spa-navigation-best-practice/6278/5 "2024-01-09T12:56:19Z")
If you make a modal or sidebar section a multipage section, yes Take a look at this link: [Multi-page sections | WeWeb documentation](https://docs.weweb.io/pages/multi-page-sections.html) ---
**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\ **Post date:** [January 9, 2024, 12:57pm UTC](https://community.weweb.io/t/spa-navigation-best-practice/6278/6 "2024-01-09T12:57:06Z")
I don’t think it’s necessary to do that for components, just design pages like you want them and use the navigation separately. What are you building? ---
**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.weweb.io/u/rory)\ **Post date:** [January 9, 2024, 1:20pm UTC](https://community.weweb.io/t/spa-navigation-best-practice/6278/7 "2024-01-09T13:20:37Z")
I think I used the wrong terminology saying components, and I could be using sections incorrectly too. I had a section to represent each page and inside a section would be containers / buttons / text etc. these elements should hide/show based on the current active page. I’m building a check-in app and on the home page is the check-in buttons that should navigate to different pages depending on whether it’s a guest or member of staff checking-in. I figured there should be a easy way to show/hide sections if CurrentPage = XYZ but haven’t found it in the documentation. ---
**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\ **Post date:** [January 9, 2024, 1:43pm UTC](https://community.weweb.io/t/spa-navigation-best-practice/6278/8 "2024-01-09T13:43:57Z")
Have you considered using different pages normally and then just making persistent variables in combination with multi-page sections to keep between the pages? ---
**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.weweb.io/u/rory)\ **Post date:** [January 9, 2024, 2:21pm UTC](https://community.weweb.io/t/spa-navigation-best-practice/6278/9 "2024-01-09T14:21:09Z")
I don’t quite follow what you mean. Can you give an example by any chance? ---
**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\ **Post date:** [January 9, 2024, 3:40pm UTC](https://community.weweb.io/t/spa-navigation-best-practice/6278/10 "2024-01-09T15:40:11Z")
Maybe [this video](https://academy.weweb.io/build-a-proof-of-concept/multi-page-sections-spa/) from Academy would help