Fixed side menu on the left side
Application Type
Reactive

Hello,

I apologize for the silly question but I thought there would be a very easy way to a menu on the left side of the screen for a desktop reactive app.

It's even displayed in one of the images in the OutSystems UI page, but I am really struggling to find a way to do it.


How can I achieve that result? I feel like I am missing something obvious.

Champion
Solution

Hi Andrea,

Inside of Layout Web Flow, you will find 2 web blocks

LayoutTopMenu and LayoutSideMenu.

Click in "LayoutTopMenu" with right-click and select "Find Usages".

After that, click in "Replace All Usages" at the bottom and select the "LayoutSideMenu"


i hope this is what you are looking for

Regards,
Pedro Costa

Champion

Another point, within your theme, you can change this parameter so that the next screens created use the LayoutSideMenu.


Hi  Andrea,

By Using source block dropdown you can select LayoutSideMenu Block for Screen. 

I hope this will help you.

Regards,

Shraddha Durgade.

Thank you so much guys! What a community! I didn't expect to have so many responses so quickly.

This is great. I just have a couple of follow-up questions.

What if I still want to use the top menu for some things (e.g. the user avatar).

  1. I have just found a random example on the web.
  2. Can I also have a side menu on the right side only for specific pages? I am thinking of a table with many filters. I would display all the filters on the right side (a sidebar always visible).

Thank you so much,

Andrea



Champion

Hi Andrea,

Design is not my strong point, but I created some customizations in this example module (attached). You can browse through the pages and webblocks I created to see which styles were needed to get the expected result.

Unfortunately, the fixed side menu on the right needs more time, but it is possible to do it by studying a little CSS and searching some examples on the internet.

Top Menu:


Side Menu:


Side with User Avatar in Header:


MenuPositionSandbox.oml

Thank you so much Pedro! This is very useful!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.