[OutSystems UI] Submenu auto close after clicking a button or link action
Reactive icon
Forge component by Platform Maintenance
Application Type
Service Studio Version
11.10.19 (Build 41208)

I wrote some Javascript in OnReady of the Menu to add class "open" to the active menu element to keep the submenu items list expand when the main menu is active. But the problem is whenever I click on a button or link action on the screen, the active menu keeps removing the class "open". However, this is solved if I refresh the whole page, and then it will work just fine for the rest. Do you have any idea about this and how to solve this but not by refreshing the website?


Hi Linh,

The general behaviour of the Submenu items list is to get collapsed even though the main menu is active. Still, I doubt the user-friendliness based on this requirement.

The solution which I could suggest for the mentioned use case is

  1. Create OnReady event handler for Menu Block
  2. Introduce a JS node within the OnReady event handler flow
  3. Define the below-mentioned JS code in the same JS node

JS Snippet:

var activeSubMenu = document.querySelector('.submenu.is--dropdown.active');

var openActiveSubMenu = function() {
   if (!activeSubMenu.classList.contains('open')) {

if (activeSubMenu) {
    document.addEventListener('click', openActiveSubMenu, false);

Hope this helps you!

Kind regards,

Benjith Sam

Hi Benjith ,

I have the same problem in my application. I tried your JS code in OnReady event, but it does not work.


It seems that ".active" class do not exsit in submenu.

Do you have any other soluton about this problem? Thank u.


Hi Ju,

Sorry for the late response. In my implementation, I was referring to the Reactive application with the Top sub-menu.

You can take a look on the sample screen

If that doesn't help, could you please share a sample .oml

Hope this helps you!

Kind regards,

Benjith Sam


Dear Linh

You can use the Simple JS to close the Dropdown - 

window.onclick = function(event) {

  if (!event.target.matches('.dropbtn')) {     var dropdowns = document.getElementsByClassName("dropdown-content");     var i;     for (i = 0; i < dropdowns.length; i++) {       var openDropdown = dropdowns[i];       if (openDropdown.classList.contains('show')) {         openDropdown.classList.remove('show');       }     }   } }
.dropbtn is the class of Dropdown Button

Check reference: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click

Let me know if you need OML for this. 

I need .oml for this


I would suggest you to put this code into OnReady event in your layout:

 document.body.addEventListener('click', function(){
document.querySelectorAll('.submenu').forEach( function(e){

Description: it will close all submenus when page is clicked. It does not matter where -- submenu is closed when you click inside or outside.

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