When using Drupal core menu's <nolink> designation (which is especially helpful in the context of a mega menu to just structurize the layout), the resulting menu items do correctly get marked up as <span> and get a CSS class .no-link.
However, the resulting <span> is still styled as a link:
dist/base.(s)css:38 // <nolink> menu items.
39 .tbm-link.no-link {
40 // When a <nolink> menu item has no submenus.
41 &.tbm-no-submenu {
42 &:hover,
43 &:focus {
44 color: inherit !important;
45 cursor: default;
46 }
47 }
48
49 &:hover,
50 &:focus {
51 cursor: pointer;
52 }
53 }
54 } 80 // Any <ul> other than the top level.
81 .tbm-subnav {
82 > .tbm-item {
83 &:first-child {
84 > .tbm-link-container {
85 > .tbm-link {
86 border-top: 0;
87 }
88 }
89 }
90
91 > .tbm-link-container {
92 > .tbm-link {
93 color: $color-text;
94 display: block;
95 padding: 0.5rem 0;
96
97 &:hover,
98 &:focus {
99 color: $color-accent;
100 }
101 }
102 }
103 }
104 } does not discern between .no-link and normal link.
Create a 4-level menu, with level 3 being a <nolink>. At least that's what I have here. I'd expect level 3 to just be a structuring, summarizing element, and level 4 to be links to the actual articles.
If I put everything on level 3, the situation is a little bit better, as base.(s)css only explicitly sets the pointer style for <nolink> elements with submenus. I don't think that makes sense, and all other problems still remain. People will most likely have structuring elements one level higher than the items belonging to them, so this does not seem like a solution to me, if that was the intention.
Remove the explicit cursor style, that works nicely here without any visible side effects, but I wonder why this has been added explicity.
Or even better, remove the tbm-link class altogether. It is no link at all, so why assign that class (and its styles), then. Probably make it .tbm-nolink for easier styling.
Fix the fact that these entries are keyboard-focusable. I am unsure how to achieve this when class tbm-link is still assigned, the tabindex attribute is definitely to blame and has to be removed, but if I do so, I cannot seem to navigate to the items below this level.
The aria-expanded attribute also needs to be removed, I guess, but I am no expert at this.
Attached is a patch that fixes it for me. It changes the tbm-link class to tbm-nolink and removes the tabindex. Everything else noted above is implicitly fixed by this (i.e. the removal of the tbm-link class).
I don't know whether this is the correct way to fix it or it should even be fixed earlier, i.e. <nolink> items should probably not get the tbm-link class assigned in the first place. But this might be more complex to achieve, so maybe my patch is OK as it is.
Feedback welcome!
I can send a PR if people consider this the correct fix, but do note that I am just a sysadmin and no dev at all, so I won't be able to provide fixes that need deeper understanding of Drupal/PHP.
PS: Thanks for the great module, much appreciated.
Fixed
3.0
Code
Thanks for catching this. I have a fix available for this that I will add shortly.
Issue #3399517 by themodularlab: <nolink> menu items are spans but...
Automatically closed - issue fixed for 2 weeks with no activity.