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:
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 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.
