Mobile Menu: Expand Submenu Branch Containing Current Page


I have rather extensive mobile menu structure containing 3 levels of submenus. While on mobile and opening the menu, I’d like to expand the menu branch containing the current page, so the user could better understand where he is located.

Right now, when opening the mobile menu, all the items and levels are collapsed and it’s hard to grasp, where exactly the current page is. Especially considering, the parent items are not highlited either.

I’m using classic Nav Menu, haven’t tried the nested version yet.

Anyone knows, how can I resolve this problem?

Hey @Blackeye , can you share a link to the site?

Hi @Tobsen, here is the link Zahradnictví Fous

But the web is in early stage of development, and I’m about to make a changes to the menu (I’ll be testing a nested version of menu element). So, in couple of days the link may be irrelevant to the problem.

Here is the example of the 3rd level page: Kapr Koi – Zahradnictví Fous

Hey @Blackeye ,

try the following js-script:

<script type="text/javascript">
        // Run the script after the page has loaded
        window.addEventListener('DOMContentLoaded', (event) => {
                    // Get all the li elements with the 'menu-item' class
            const menuItems = document.querySelectorAll('');

            menuItems.forEach((item) => {

                // Check if the element has the 'current-page-ancestor' class
                if (item.classList.contains('current-page-ancestor')) {
                    // Add the 'open' class to the element
                    // Add the 'active' class to the element

You can tweak the code as you like.

Thanks, @Tobsen. It’s a good start, but it has some unexpected quirks as well (see Kapr Koi – Zahradnictví Fous)

  1. On load the submenu is open even for the desktop (probably could be resolved by modifying the select only for the mobile menu).
  2. Destop menu opened this way tends to stay open even when hovered out.
  3. Mobile menu is expanded as expected, but when the other menu is clicked the branch stays expanded (without the script only one submenu stays expanded).

BTW, concerning the expanded mobile submenu - I wouldn’t mind if the previously expanded menu stayed expanded (so I could have several menu expanded). In fact I would prefer it to behave this way - is it possible to do it? Of course consistently, not just fo the current page branch.


Hey @Blackeye,

thank you for posting the quirks, now I found some time to look at it again. You are totally right. I’ve taken another look at it and made another approach. It’s tested for the quirks you mentioned, maybe it has new ones :wink:
Please try the following code:

// Run the script after the page has loaded
window.addEventListener("DOMContentLoaded", (event) => {
  // Get the mobile-menu-trigger-button
  const menu_trigger = document.querySelector(".bricks-mobile-menu-toggle");

  // listen for click-event on the mobile-menu-trigger-button
  menu_trigger.addEventListener("click", (event) => {
    // wait 10ms to give the menu time to open (bricks will apply some settings to the menu with its own listeners)
    setTimeout(() => {
    }, 10);

  function showCurrentMenuItem() {
    // Get all list-items that have children and are ancestors of the current page
    const listItemsToOpen = document.querySelectorAll(

    listItemsToOpen.forEach((item) => {
      const btnToggleSubmenu = item.querySelector("button");
      // create a click-event
      const clickEvent = new Event("click", { bubbles: true });
      // we simulate a click-event on the button to open the sub-menu

Hi @Tobsen, excellent! Now it seems to work as it should be. Thanks a ton! :+1:

And since you seem to know the mobile menu quite well, any ideas weather is possible to do this?

  1. Enable more than one expanded submenu at once (don’t collapse once opened submenu, until user does it himself).
  2. Do some animation while expanding/collapsing the submenu.

Thanks again.