How to avoid navbar refresh when navigation to a new page and toggling section visibility in Webflow? Answered

• 

  Raquel Lopez

  • July 19, 2025 12:57

  Webflow treats all elements as static elements 🤔 Is there a flickering?

  Webflow is not a SPA framework. You can see it as a static site generator. And it’s not optimized to do hash routing, handle state, etc. if it’s a small site you could get your way by adding some JavaScript to create that effect as you’re doing. But if you plan on scalating I would recommend you to ditch Webflow and use an UI framework or, if Webflow is a requirement, use a progressive-enhancement framework as a hybrid alternative like AlpineJS or Htmx.

  I maintain a Webflow site where I use Alpine + Pinecone router for that SPA like pagination. It works really nice. They have added some cool features over the years.

  0
• 

  Nathan Thomas

  • July 19, 2025 14:20

  Webflow is the requirement in this case unfortunately. I'd be building it in React if it wasn't. I'll check out AlpineJS and Htmx as you suggested. Thank you.

  I've got a working prototype using Alpine, but was unable to get pinecone router to play nicely. Currently I have a setup like this in a custom code block and it works, but there has got to be a better way than having to paste the HTML for each individual page into the code block. Any suggestions to make this easier to maintain would be greatly appreciated?

    <!-- Page Content -->
  <div x-data="{ page: location.hash.replace('#', '') || 'home' }" 
    @hashchange.window="page = location.hash.replace('#', '') || 'home'">
  
    <div x-show="page === 'home'" x-transition>
          <!-- page content here -->
    </div>
  
    <div x-show="page === 'programs'" x-transition>
          <!-- page content here -->
    </div>
  
    <div x-show="page === 'pricing'" x-transition>
          <!-- page content here -->
    </div>
   
    <div x-show="page === 'about'" x-transition>
          <!-- page content here -->
    </div>
    
    <div x-show="page === 'contact'" x-transition>
      <!-- page content here -->
    </div>
  </div>
  

  0
• 

  Raquel Lopez

  • July 19, 2025 14:21

  You can add Alpine attributes as custom attributes to Webflow elements. You don’t have to use blocks of embed code.

  What was the issue with the routing? They have a working demo that you can use as a reference

  0
• 

  Nathan Thomas

  • July 19, 2025 14:22

  I just wan't able to get it to work. I'll keep hacking at it. Honestly I think this is just growing pains as a dev used to working in a code editor trying to wrap my head around a static click and drag site builder.

  0
• 

  Raquel Lopez

  • July 19, 2025 14:23

  You can use your code editor to edit the program. It's just more cumbersome because you need to import the page to your editor every time you publish the page to see any changes made from Webflow...

  Alpine gives you globals so you can add attributes to the elements of the page and then develop the program after an initialization. Keep in mind that Webflow does not allow At(@ )or Dots(.) on their custom attributes names, so always use their long versions, or inject the binders via code with x-bind. It's a small library but really flexible.

  And if you prefer you can use vanilla javascript with events on click. It's not a complex logic.

  

  0
• 

  Nathan Thomas

  • July 19, 2025 14:24

  Hey, just a quick follow up... Wanted to give you a huge thanks for suggesting Alpine and Pinecone router. I was able to get the functionality I was looking for thanks to you! 🎉

  0

Please sign in to leave a comment.