Able to use custom variables in page.html.twig but not in menu.html.twig

Question

I have a module setting config variables which I'm trying to display in a twig template. When I use

function mytheme_preprocess_page(&$variables){
    $variables['facebook'] = \Drupal::config('social.settings')->get('facebook', 'No username');
    $variables['twitter'] = \Drupal::config('social.settings')->get('twitter', 'No username');
    $variables['instagram'] = \Drupal::config('social.settings')->get('instagram', 'No username');
    $variables['youtube'] = \Drupal::config('social.settings')->get('youtube', 'No username');              
}

I'm able to display the variables in my page.html.twig template by invoking

{{ facebook }}{{ twitter }}{{ instagram }}{{ youtube }}

However I'd like menu.html.twig to invoke it. Even when adding a preprocess hook for menu like so

function mytheme_preprocess_menu(&$variables){
    $variables['facebook'] = \Drupal::config('social.settings')->get('facebook', 'No username');
    $variables['twitter'] = \Drupal::config('social.settings')->get('twitter', 'No username');
    $variables['instagram'] = \Drupal::config('social.settings')->get('instagram', 'No username');
    $variables['youtube'] = \Drupal::config('social.settings')->get('youtube', 'No username');              
}

menu.html.twig produces nothing when invoking

{{ facebook }}{{ twitter }}{{ instagram }}{{ youtube }}

I know menu.html.twig is being used because I can make changes to it and the changes will appear. I also know that mytheme_preprocess_menu is being called because drupal_set_message works from it. However {{ dump() }} from menu.html.twig is not displaying anything on the page.

Answer 1

The menu theme is declared using the variables key (see doc).

That means that only the keys present in the variables array can be passed to the template.

Any custom variable needs to be first added using hook_theme_registery_alter