How to add a nolink menu item

Question

I'm creating a menu item for my main navigation bar. It looks like this:

module/module.links.menu.yml:

top.link:
  title: 'Operations'
  description: 'Operations'
  parent: main
  menu_name: main
  url: 'route:<nolink>'
  expanded: TRUE
  weight: -49

mod.first_option:
  title: 'Functionality 1'
  description: 'Functionality 1'
  parent: 'top.link'
  menu_name: 'top.link'
  route_name: 'mod.route_name1'
  expanded: TRUE
  weight: -49

mod.secon_option:
  title: 'Functionality 2'
  description: 'Functionality 2'
  parent: 'top.link'
  menu_name: 'top.link'
  route_name: 'mod.route_name2'
  expanded: TRUE
  weight: -47

I'm trying to create an empty top level link, with nested elements beneath it for a menu. I've tried url: 'internal:##', url: 'route:<nolink>', and link: '<nolink>', Anything else I could try?

Answer 1

Try adding the following, but this will still reload the page, which may not be ideal.

url: 'internal:#nolink'

These module maybe interesting as it may not be necessary to manually edit the menu code. You can add a class to a menu item and add CSS

pointer-events:none; cursor:default; text-decoration:none;

https://www.drupal.org/project/link_attributes https://www.drupal.org/project/menu_link_attributes