Additional twig suggestions for menus

Question

Unlike other elements, the base twig suggestions for menus are only "menu.html.twig" and "menu-[menu_name].html.twig".

I am aware that I can generate additional suggestions through the hook THEME_theme_suggestions_menu_alter, but the $variables array does not contain any useful data. Case in point, I want to retrieve the current region, is it possible?

Answer 1

All steps described here work for me with some minor modifications.

GOAL: show main menu in both header and footer region, but use a different template file for both (based on their region). PREMISE: your theme has regions (like header and footer) and you have used the drupal block system to place the main menu in both your header as in your footer.

I did this in mytheme.theme file: Dont forget to add the Block use statement in the beginning of your .theme file:

use Drupal\block\Entity\Block;

Now here's the magic for region based menu templates. Also inside your .theme file:

/**
 * Implements hook_preprocess_HOOK().
 *
 * Pass block region value to content so this can be used in
 * MYTHEME_theme_suggestions_menu_alter.
 */
function MYTHEME_preprocess_block(&$variables) {
  if (isset($variables['elements']['#id'])) {
    $region = Block::load($variables['elements']['#id'])->getRegion();
    $variables['content']['#attributes']['region'] = $region;
  }
}

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 *
 * Provide region based menu suggestions.
 */
function MYTHEME_theme_suggestions_menu_alter(&$suggestions, array $variables) {
  if (isset($variables['attributes']['region'])) {
    $suggestions[] = 'menu__' . $variables['menu_name'] . '__' . $variables['attributes']['region'];
  }
}

RESULT when inspecting the main menu inside the header:

<!-- FILE NAME SUGGESTIONS:
* menu--main.html.twig
* menu--main--header.html.twig
* menu.html.twig
--> 

RESULT when inspecting the main menu inside the footer:

<!-- FILE NAME SUGGESTIONS:
* menu--main.html.twig
* menu--main--footer.html.twig
* menu.html.twig
--> 

Answer 2

There are a couple of functions that seem like they can help here:

function hook_theme_suggestions_HOOK_alter

function hook_theme_suggestions_alter

This blog post has a useful (if a little bit hacky) way of adding to the template suggestions based on block ID.

http://kristiankaa.dk/article/drupal8-region-specific-menu-theme-hook-suggestion

He suggests using hook_preprocess_block() to add the block ID to the variables array and then using hook_theme_suggestions_HOOK_alter() to add that ID to the theme suggestions for the menus.

/**
 * Implements hook_preprocess_block().
 */
function THEMENAME_preprocess_block(&$variables) {
  $variables['content']['#attributes']['block'] = $variables['attributes']['id'];
}

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function THEMENAME_theme_suggestions_menu_alter(array &$suggestions, array $variables) {
  // Remove the block and replace dashes with underscores in the block ID to
  // use for the hook name.
  if (isset($variables['attributes']['block'])) {
    $hook = str_replace(array('block-', '-'), array('', '_'), $variables['attributes']['block']);
    $suggestions[] = $variables['theme_hook_original'] . '__' . $hook;
  }
}

So you'll end up with an additional menu--MENU-NAME--BLOCK-NAME.html.twig template possibility. It's a neat trick and works well!

Answer 3

Confirming $variables['attributes'] is always empty in 8.2.x, so there's insufficient contextual info to form a new suggestion

I solved by installing the menu block module, which adds an field for Theme Hook Suggestion for the menu.html.twig into the edit screen for each menu block.

Answer 4

You can't get any extra info in suggestions alter, like context. But it's possible to inject suggestions when you render any thing in Drupal 8.

Normally you would do something like this:

$variables['menu'] = [
  '#theme' => 'menu',
  ...
];

Code like this, will probably be inside a menu block, but it could be anywhere.

What you can do to achieve your goal is to change the theme call:

$variables['menu'] = [
  '#theme' => 'menu__header',
  ...
];

Doing the above will add the header suggestion to menu template. I'm not sure how to best accomplish the above.

1. You should subclass the menu block and change the code a bit
2. I'm not sure that you can get the region the block is placed in on redner. Otherwise you can add the suggestion as a setting which is configured on the block along with the other menu settings.

Answer 5

Basically the workaround suggested by featherbelly does work on a Drupal 8.2.7, but it's really hacky and the attributes possibly will also get rendered unless you explicitly unset them again. If they do get rendered this will cause invalid markup.

Using menu_block as suggested by user73304 is way the better option here and it gives you full control of which template is used for any menu via the UI, which is great and better than hacky code that might not work anymore in future versions.