296
Views
2
Comments
Solved
How to create a side menu bar that expands when hovers over an icon
Application Type
Reactive

Hi, I am currently using Outsystems Version 11.53.19 / Build 61407 (Reactive). I have been trying to figure out how to create a side menu bar that expands when hover over the icons. See image.

My current menu bar is only the standard navigation where the layout Side menu is overlay which means that it appears when the hamburger is clicked and hides when click again.

I would like to have a better navigation side menu bar where the icons are still seen when collapses but when hover over the icons, it expands to show the icon and text. Kindly advice how I can achieve this feature for my reactive web app. Thank you very much.

As Forge components are restricted in my work, I can only use the standard features offered by Outsystems UI. Appreciate the help provided. Thank you.

See example in this link: https://codepen.io/nunorodrigues/pen/yLpBMxg

How do create this exactly in Outsystems Reactive? 


side bar icons.jpg
2026-03-12 06-20-48
KUNDAN CHAUHAN
Champion
Solution

Hi Angeline Lau ,

There are many threads about this subject, one of them  I  am sharing 

they also provide oml file , try to see  answer to see the next steps you should take :)

https://www.outsystems.com/forums/discussion/72893/dynamic-side-menu/

Thanks

2020-03-27 18-58-43
Fred Derks

Yeah you could just use css for this, grow the height of a menu link on hover, similar to your example link where they grow the width on hover.



2026-03-12 06-20-48
KUNDAN CHAUHAN
Champion
Solution

Hi Angeline Lau ,

There are many threads about this subject, one of them  I  am sharing 

they also provide oml file , try to see  answer to see the next steps you should take :)

https://www.outsystems.com/forums/discussion/72893/dynamic-side-menu/

Thanks

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