javascript – top items rendered as and remain clickable (give page refresh)

I have a TB megamenu (8.x-1.x-dev) with a few top-level (parent) items that are not links, they should just trigger the submenu to drop down.

According to the documentation I could find, links marked as <nolink> or route:nolink will be rendered as <span> rather than <a> so styling can be retained, but they can’t clicked, and submenus should still be toggled.

However, both <nolink> and route:nolink are still rendered as <a>, causing a page refresh when clicked.

I have tried adding the nolink definition as a special menu item under (A) admin/structure/menu/manage/main-menu, and in (B) the tb mega menu settings at admin/structure/tb-megamenu/main-menu, but nothing helps:

  • When adding `nolink` to the Drupal menu link (A), it leaves the link empty, but you get the page refresh when you click it. Submenu does unfold.
  • When adding `nolink` to the TB Megamenu link (B), it leaves the link empty, no page refresh as it now activates a css class that says `.nolink {pointer-events:none;}`, but button goes dead, and submenu does NOT unfold.

When on mobile, all menu items with children do unfold the submenu, don’t trigger a page refresh; it’s that behaviour I’d love to be able to have in desktop/laptop view too. (Even better if there is a switch “active link yes/no” or similar, so I can decide per button?)

Any help much appreciated 🙂