Don't link menu in the active page 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:

&lt;ul class="menu"&gt;
    &lt;li class="first leaf"&gt;&lt;a href="/mysite/"&gt;home&lt;/a&gt;&lt;/li&gt;
    &lt;li class="leaf"&gt;services&lt;/li&gt;
    &lt;li class="leaf"&gt;&lt;a href="/mysite/portfolio"&gt;portfolio&lt;/a&gt;&lt;/li&gt;
    &lt;li class="leaf"&gt;&lt;a href="/mysite/contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;



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') %}
&lt;span&gt;{{ item.title }}&lt;/span&gt;
{%- else -%}
{{ link(item.title, item.url) }}
{%- endif -%}
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.