Collapsable sidebar to icon bar


Is it possible to create a collapsable sidebar like below, natively in Weweb (without the need to create a custom sidebar component)

Yes it is, you can have an example here

The above element can be a good starting point if you want to achieve a collapsable side menu, but you will need to do some additional work by creating a variable that will control the collapsed/expanded control and then accordingly create states to style it

1 Like

Thanks. I will try it out

Can you elaborate a bit more on how to do that?

You can start by dragging the sidemenu from the ‘Layout’ section. You can delete all the contents and start by creating two divs:

  • One that contains all the icons you want to display when it’s collapsed
  • Second one containing other information that will show when expanded

From there you need to make a variable that will control whether the menu is expanded or collapsed. You can bind this value to the width of the menu and the display of the second div

I am getting there, I added a toggle icon that sets the openmenu variable true or false. Based on thst I show / hide the menu labels and change the sidebar logo. I will post the result when finished

I’m keen to see more of this in action

Here is my current result
Screen_Recording_2023-04-26_at_21_05_16_AdobeExpress (2)


I was able to implement expanding and collapsing on mouse entry/exit like this: