Add Onclick Events to Drupal Menu Links

| Drupal
Add Onclick Events to Drupal Menu Links

We've written before that menu links are one of the more basic features on a Drupal site.

One of our members wanted greater control over their menu links by using Javascript's Onclick events.

An Onclick event allows you to choose the action that happens when someone clicks a link.

I'm going to show you an easy way to make that possible, without any custom coding.

Step #1. Installation

Add Onclick Events to Drupal Menu Links

Step #2. Using Onclick Events

  • Go to Structure > Menus and find the menu links you want to modify.
  • Scroll down far enough and you will see an "Onclick" box. Here you can safely enter your Onclick events. These will be automatically added to your menu links on the frontend of the site. As shown in the image below, you don't need to include the Onclick message. Here's the original code:
    onclick="alert('You are clicking on me');"
onclick

Step #3. Testing Onclick Events

  • Go to your menu and check your links. They should now have Onclick events working:
click me onclick event

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.