Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

I'll now show you the necessary code snippets. My module's name is mymodule, so you probably have to adjust this to your desired module name.

By default menu item attributes is like this: 

 

default_fields_in_menu_link_content_item

 

Override the form

  • This adds the input field for the class attribute and defines our custom submit handler. 
  • Next, we define our custom submit handler, where first build up the attributes array based on the user input, then load the menu link entity, set the value and finally save the changes.

 

<?php

use Drupal\Component\Utility\Html;
use Drupal\Core\Form\FormStateInterface;


/**
 * @param array $form
 * @param FormStateInterface $form_state
 * @param $form_id
 */
function mymodule_form_menu_link_content_form_alter(array &$form, FormStateInterface $form_state, $form_id)
{
  /** @var \Drupal\menu_link_content\MenuLinkContentInterface $menu_link_content */
  $menu_link_content = $form_state->getFormObject()->getEntity();

  // get link options
  $menu_link_options = $menu_link_content->link ? $menu_link_content->link->first()->options : [];

  // add custom fields classes
  $form['classes'] = [
    '#type' => 'textfield',
    '#title' => t('CSS classes '),
    '#description' => t('Enter additional classes to be added to the menu item.. Separate multiple classes by spaces.'),
    '#default_value' => isset($menu_link_options['classes']) ? $menu_link_options['classes'] : '',
    '#weight' => 30,
  ];

  // add custom submit handler
  $form['actions']['submit']['#submit'][] = '_mymodule_form_menu_link_content_form_submit';
}

/**
 * @param array $form
 * @param FormStateInterface $form_state
 */
function _mymodule_form_menu_link_content_form_submit(array &$form, FormStateInterface $form_state)
{
  // get classes values
  $classes = $form_state->getValue('classes');
  // get menu link entity
  $menuLinkEntity = $form_state->getBuildInfo()['callback_object']->getEntity();
  // get defaul link options
  $menu_link_options = $menuLinkEntity->link->first()->options;
  // add classes to link options
  $options = array_merge($menu_link_options, ['classes' => $classes]);
  // change new link options
  $menuLinkEntity->link->first()->options = $options;
  $menuLinkEntity->save();
}

the result after adding new CSS class attribute:

 

add_custom_fields_in_menu_link_content

 

Add CSS class attribute To Menu Item link

 



/**
 * @param $variables
 */
function mymodule_preprocess_menu(&$variables)
{
  foreach ($variables['items'] as $item) {
    // get options
    $options = $item['original_link']->getOptions();
    if ($options && isset($options['classes'])) {
      $classes_array = explode(' ', $options['classes']);
      foreach ($classes_array as $class) {
        // add classes to class attribute
        $item['attributes']->addClass(Html::cleanCssIdentifier($class, []));
      }
    }
  }
}

 

Finally, here's the result after adding CSS classes to menu item.

 

add_custom_fields_in_menu_link_content

Comments

Add new comment

Restricted HTML

Search

Page Facebook

Become a patron

If you need some help or you search a Drupal freelancer don't hesitate to contact us.

 

Contact Us

All the content is FREE but I still need your help

 

Become a patreon