Non-clickable menu items in Wagtail - wagtail

Question

I'd like to have some main menu items which are non-clickable but their children are in drop-down menu and clickable.
I imagine an approach may be as a special type of model which is:
parent to a few pages
inaccessible itself
Or may be more elegant way to do it I don't suspect?

Answer 1

As you mentioned, you are using the example code from here, this is more of a Bootstrap question but here is a potential solution.
Towards the end of the <nav> element you have your container that contains the main menu items.
<div class="container">
<div class="collapse navbar-collapse" id="navbar-collapse-3">
<ul class="nav navbar-nav navbar-left">
{% for menuitem in menuitems %}
<li class="{% if menuitem.active %}active{% endif %}">
{% if menuitem.show_dropdown %}
<a href="{{ menuitem.url }}">{{ menuitem.title }}
<span class="hidden-lg hidden-md hidden-sm visible-xs-inline">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
</a>
{% top_menu_children parent=menuitem %}
{% else %}
{{ menuitem.title }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
To make the menu items not clickable, adjust the href attribute for the menu item. Instead of being {{ menuitem.url }} make it #. This will ensure the menu dropdown still works but there is no URL to take people to the 'parent' page.
<a href="#">{{ menuitem.title }}
<span class="hidden-lg hidden-md hidden-sm visible-xs-inline">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
</a>
See also: Boostrap 3 Navbar Docs