Menu item without link

Question

I often create a menu item with no link (like a not-clickable menu item with a dropdown menu), but in the "System Links" tab, there are several options that look similar.

What's the difference between using Menu Heading, Text Separator and an External URL pointing to linked to "#"?

Answer 1

The main difference is how the HTML is rendered. Thus it depends on the template what the menu items look like. This is how the default Protostar template will display the different options:

External URL

The default HTML output of the menu item is a link.

<li class="item-120"><a href="#">External URL menu item</a></li>

This is exactly the same as any other "normal" menu item:

Meny Heading Item

This will create the following HTML code for your menu item:

<li class="item-121"><span class="nav-header">Menu Heading item</span></li>

Text separator

The default HTML output of the text separator is this:

<li class="item-122 divider"><span class="separator">Text Separator item</span></li>

(Notice the additional divider class in the <li> tag.)

Other templates

Many templates will override the default rendering, and give different results. This is how the same menu items looks in a template from Joomla51.com:

HTML output of the same menu:

<li class="item-120"><a href="#" tabindex="-1" class="subMenuBtn">External URL menu item</a></li>
<li class="item-121"><a href="/" tabindex="-1" class="subMenuBtn">Menu Heading item</a></li>
<li class="item-122"><a tabindex="-1" class="subMenuBtn">Text Separator item</a>
</li></ul>

Note how all menu items look the same. This is also the case with other template clubs, like RocketTheme (although the source code is different, the three items look the same).