Drupal 8 - Adding/Creating Menu Item with HTML in it - php

Question

I'm creating a website using Drupal 8. I want to create a menu item link that I could add HTML/Javascript code in it (I'm trying to display a widget that expands on click in the menu rather than displaying it in its own block next to the menu). The only way I could see to add a menu item is to link to a page.

Answer 1

You could work with a derivative. This lets you customize pretty much everything about it and control what is to be made. An example below:
Note: I am assuming you have a general knowledge of custom modules. If not follow this link
Create the following file in your custom module:
# my_module.links.menu.yml
my_module.custom_links:
deriver: \Drupal\my_module\Plugin\Derivative\CustomLinkDerivative
And now for the derivative class (Located under my_module/src/Plugin/Derivative)
<?php
namespace Drupal\my_module\Plugin\Derivative;
use Drupal\Component\Plugin\Derivative\DeriverBase;
use Drupal\Core\Plugin\Discovery\ContainerDeriverInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
class CustomLinkDerivative extends DeriverBase implements ContainerDeriverInterface {
public static function create(ContainerInterface $container, $base_plugin_id) {
return new static();
}
/**
* {#inheritdoc}
*/
public function getDerivativeDefinitions($base_plugin_definition) {
$links['custom_menulink'] = [
'title' => t('Custom menulink'),
'menu_name' => 'main',
'route_name' => 'entity.node.canonical',
'parent' => footer,
'route_parameters' => [
'node' => 1,
]
] + $base_plugin_definition;
return $links;
}
}
Note: Derivatives get triggered during rebuild of cache!
This just creates a link in the footer that directs to node 1. You can add all sort of stuff and logic to your liking. Hope this helps you :)