0

My question is closely related to this one: How make top level menu item not have link, but have sub-menus that are linked?

When I create menu items with the style customizer, every menu item gets created with an <a> tag. When there is a URL present, this will be something like <a href="URL" class="menu-link">. When I create a menu item that opens to more menu items, I refer to this as the parent menu item. Sometimes it makes sense to have a page to link to for a parent item, but there are other times when I do not want there to be a link.

The typical, current practice for a link-less menu item seems to be creating a Custom Link item and leaving the URL section blank. This works, but it still creates the menu item using an <a> tag, where there is no "href" attribute. This is not really "good" HTML, and it also causes Lighthouse to raise a penalty for an uncrawlable "link".

Example: Creating a Custom Link menu item Example: A high level "Custom Link" menu item with a blank URL

What's the easiest way to solve this problem, of creating a menu item that doesn't use an <a> link tag? I'm okay with plugins if they add no overhead when the client loads the page.

Putting javascript:void(0); in the URL section is invalid.

4
  • 1
    Is # not a valid URL if the results of the lighthouse tool are the concern? Note that if you were able to replace the anchor tag with other tags such as a span, you may need to modify stylesheets if they also assume anchor tags. There are also accessibility consequences as a span or div is not considered an interactive or focusable element, whereas an anchor tag is. Anchor tags are preferable for other reasons too. For example, you can use the keyboard to activate such a tag and open the submenu. Anchors also get picked up as navigation by screen readers and bots, SEO could be impacted
    – Tom J Nowell
    Jun 18 at 0:21
  • # is valid, but I don't want the menu item to look like a link if it does nothing. Since you said this; I checked and the menu only expands on hover, not with the keyboard. So, I'll need to modify the theme or something so that it opens on click or Enter. Jun 18 at 18:24
  • 1
    You can fix that with styling though, CSS can even make it look like a checkbox if that's what you really want, looks shouldn't determine the underlying element, semantics and function should.
    – Tom J Nowell
    Jun 18 at 18:49
  • While I wouldn't consider this question closed, this above comment is enough for my purposes. Jun 28 at 23:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.