Navigating Sections in Webflow with Application Shell Components

·

Hey everyone! I just started using the application shell components from the library for the very first and I wanted to ask: how can you navigate from section to section when staying in Webflow and not involving other apps. My first tries were using it as a tab component (but it was not set-up like that) or give all sections on that page IDs and navigate that way. Is there another way of doing it? Thank you !

4 comments

Brandon B.
·
Hi, Mihnea 👋 Are you wanting to add links that jump / scroll a user up and down a page or to specific sections on other pages? If so, you'll use the ID portion of the Element Settings menu to set an ID for the specific section. Then, you'd go to your link / button settings and set the link type to Page Section and specify the ID you set for your page section.
Brandon B.
·
Mihnea
·
Hey Brandon, thank you for helping me with this! 🙂 I am looking for a more seamless transition between the sections on the sidebar. like a fade-out and fade-in as opposed to scrolling up and down when the user clicks on sidebar links. Do you happen to know if that is possible with Webflow and Relume .. perhaps some custom scripting?
Brandon B.
·
Ah, gotcha. Something like a show/hide function to make the page function more like a single-page app? You could probably accomplish this by setting your initial-state section to display: block/flex/grid (pick your poison), setting the other sections to display: none, and then using custom interactions to fade them in and out based on previous click. It's probably not exactly what you're looking for, but Relume's accordion interactions do this nicely. You could probably start from there and customize the accordion.
🙏1