Don't link menu in the active page

Question

My Q is equal as Remove link from active page in menu

I need the active page in my menu not to be a link.

So let's say I'm on the services page, I need my menu structure to look like this:

<ul class="menu">
    <li class="first leaf"><a href="/mysite/">home</a></li>
    <li class="leaf">services</li>
    <li class="leaf"><a href="/mysite/portfolio">portfolio</a></li>
    <li class="leaf"><a href="/mysite/contact">contact</a></li>
</ul>

How can I do that in drupal 8?

Update what about this thing in my theme menu--main.html.twig?

{% if item.attributes.hasClass('active') %}
<span>{{ item.title }}</span>
{%- else -%}
{{ link(item.title, item.url) }}
{%- endif -%}

Answer 1

In D8 the handling of active links is split between php and js, so that the menus can be cached independently from the page they appear on. A solution in php or twig is only possible when you switch off caching of menus, but this is not good for performance. So a better approach is probably in javascript.

Remove the link tag by selecting the links with the class is-active:

mytheme/js/remove-active-links.js

(function ($, Drupal) {

  'use strict';

  Drupal.behaviors.removeActiveLinks = {
    attach: function (context) {

      $(context).find('a.is-active').contents().unwrap();

    }
  };

})(jQuery, Drupal);

You need to define a dependency on the core active-link.js, which sets the class is-active, so that your js file runs later:

mytheme/mytheme.libraries.yml

remove-active-links:
  version: 1.x
  js:
    js/remove-active-links.js: { }
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupal.active-link

---

Background information

The js code above is the most basic solution, but it loads jQuery also for anonymous traffic, which is not a problem if you already use it.

If you want to avoid jQuery see ActiveLinkResponseFilter, which is a response subscriber adding the class is-active for anonymous requests.

You can then alter the result in a custom response subscriber with a lower priority, similar to the js code above.

Answer 2

The HTML is generated by a twig template, you should see {% for item in items %} in one of your theme's menu templates, and then do a condition e.g. {% if item.in_active_trail %}. You could probably just check for item.in_active_trail in the item variable, but if that's not good enough, just use Kint (from the devel module) to figure out a variable that works for your situation.