Relume Community Icon

Join the Community

Building a Persistent Sidebar with Accordion in Webflow Design System

·

·

Hey all, I’m trying out build out a design system using Webflow… I am using relume components to build the site…. early doors but I have it a small issue… I hate built a scrollable sidebar with accordions for grouping… the only thing is, when I click on the page (only icons page started yet) it refrshes the page obvs but closes the accordion where the active link is, basically I need the sidebar to always persist it’s state even when clicking between pages…. I obvs ha set the page up wrong but any support would be ace Read only https://preview.webflow.com/preview/pollo-1674a2?utm_medium=preview_link&utm_source=de[…]&pageId=67b25002e2be40c081c7c05b&locale=en&workflow=preview Preview Link: https://pollo-1674a2.webflow.io/design-system/icons

6 comments

Matt J.
·
·
Tommy S. yeah only way that I'm aware of doing that would be to use JS - JS would need to know that the link they are currently on, is within a certain accordion, and keep it open. I suppose if the accordions are not going to change much, if at all, you could keep the accordions out of a component, and only have the links within the accordion be a component (for ease of updating across multiple pages). And then copy/paste the accordion across the pages, and assign a class to the accordion based on the page they are actively on. This might not make sense and I can try to demonstrate it a little bit later.
Tommy S.
·
·
Hi Matt, thanks for answering, Ah I see, so just have the sidnav not in a component and have the current pages parent accordion expanded
Matt J.
·
·
yeah exactly
Matt J.
·
·
I guess I didn't explain it poorly after all lol
🔥1
Tommy S.
·
·
😃, I guess the styling of all the sidebar content is handled by CSS…. will see if I can get one of our REACT devs to write some code… if not may have to do the workaround
Matt J.
·
·
yeah for sure

Building a Persistent Sidebar with Accordion in Webflow Design System | Relume Community