How to make non clickable menu item programmatically in Drupal

What is a menu item?

In a web application, a menu item is a navigational element that appears on the user interface, usually within a menu or navigation bar. It represents a link or option that users can utilise to navigate across the application's various sections or pages. Menu items may include text, icons, or other visual signals, and they are frequently organised hierarchically to aid in easy navigating across the application's content and functionality.

How to create a menu in Drupal 10?

To create a menu in Drupal, login to the application using administrator credential, then navigate to /admin/structure/menu. Here you will see a link + Add menu.

There are two ways to create links in a menu.

• User interface
• Programmatically

User Interface

To create a menu link, after login visit to /admin/structure/menu and choose the menu under which you want to create a link. Click on Edit menu link then click on + Add link.

Programmatically

Menu link can be created using code. To make a link programmatically create a file module.links.menu.yml in your custom module.

bhimmu.link_example:
  title: "Custom Link"
  description: 'Some description'
  route_name: 'bhimmu.demo'
  menu_name: main

In the above example

bhimmu.link_example: It is kind of namespace for the menu link which must be unique in the project similar to a route name.

title: The link title.

description: It is the link description which will be show on link hover.

route_name: Route name from module.routing.yml file.

menu_name: Machine name of the menu under which we want to create a custom link.

How to make non clickable menu item programmatically in Drupal 10

Sometimes we need to construct a link that does not redirect the user to any page but instead serves as a parent link, and then we may add more child links. For example:

• Parent Link (Non clickable)
  • Child one (Clickable)
  • Child two (Clickable)

We can take the example from system module from Drupal core.

# web/core/modules/system/system.routing.yml
'<nolink>':
  path: ''
  options:
    _no_path: TRUE
  requirements:
    _access: 'TRUE'

To make non clickable menu item programmatically we need to create a file modulename.links.menu.yml in our custom module.

# web/modules/custom/bhimmu/bhimmu.links.menu.yml
bhimmu.link_example:
  title: "Custom Link"
  description: 'Some description'
  route_name: '<nolink>'
  menu_name: main

Install the module if it isn't already there, or clear your cache. You can now see a link in the main menu. However, there is a problem: this URL can be accessed by any user, whether logged in or not. To control this behaviour, we can create our own routing rather than using a system module route.

'<bhimmulink>':
  path: ''
  options:
    _no_path: TRUE
  requirements:
    _custom_access: '\Drupal\bhimmu\Controller\BhimmuController::access'

We have added a route and in the route we are using _custom_access property. More detail can be found here in Drupal documentation.

 Next create a controller class in the custom module Bhimmu.

# web/modules/custom/bhimmu/src/Controller/BhimmuController.php
<?php

namespace Drupal\bhimmu\Controller;

use Drupal\Core\Access\AccessResult;
use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Session\AccountProxy;

final class BhimmuController extends ControllerBase {
  public function access(AccountProxy $account) : AccessResult {
    if (// User have access) {
      return AccessResult::allowed();
    }   
    return AccessResult::forbidden();
  }
} 

Public method access in the BhimmuController can define the logic when a user can access this link or access denied.
 

Conclusion

Drupal core APIs are an excellent approach to accomplish tough tasks in a simple manner. You must consider your requirements, and there must be anything in the Drupal core that can be used. This type of link can be handy when you want to provide drop-down menu options but the parent link should not be clickable. 

Follow my WhatsApp channel for regular updates and prepare for Acquia Certification exam.