Hello @AJ Naude, You can refer this Forge component or can take this.

Regards,

Adam Gangrekar.

Hi @AJ Naude

Dynamic Drop Down Menu Sample - Overview (O11) | OutSystems

Please Check this Forge Component.

Hope Its helps.

Thanks

Karnika.K 

To create a side menu that can collapse and expand without stretching over the top menu, you can either customize the existing "LayoutSideMenu" or build your own from scratch. 

1. Use Existing Forge Components:

   • Check the OutSystems Forge for components like "Silk UI Web" or "OutSystems UI" which might have templates or patterns that can be adjusted to fit your needs.
   • Components like "SideBar" or "ResponsiveSideMenu" might also offer the flexibility you're looking for.

2. Customize the LayoutSideMenu:

   • Start by cloning the "LayoutSideMenu" to your application so you can modify it without affecting the original component.
   • Modify the CSS and structure to prevent it from stretching over the top menu. You can adjust the CSS to make the side menu stay within the bounds of the main content.

3. Create a Custom Side Menu

Example with OutSystems Components:

1. Create a Web Block:

   • Create a new web block for the side menu.
   • Use a Container widget for the side menu and another for the main content.

2. Style with CSS:

   • Add custom CSS to style the side menu and main content as described above.

3. Toggle Button Logic:

   • Use a Button widget and On Click event to trigger the toggle functionality.
   • Add a Boolean variable to manage the collapsed state and use it to toggle classes or styles.

Hello AJ Naude ,

I have made one sample hope it will help you.

I used sidebar block from OutSystemsUI 

Thanks 

Regards Gourav Shrivastava

Thanks for the input guys, it was really helpful