n How to add custom menu item attributes in Drupal 8 | CodimTh

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

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.



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;

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.



Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts


Page Facebook