0

I use Drupal 7 and I’d like to have two menus rendered different: one in the nav bar showing dropdowns links for child pages, and another that simply lays out all links in the sidebar. While I can get this sidebar functionality by targeting a specific menu name, I’d like to apply these rules more generally by targeting any menu that gets placed into the region. Is it possible to select regions in theme_menu_link? Also open to the idea that I’m totally off on my approach for this.

1
  • You can use context module to display menu block. Also you can render same menu in different region from template files and then write CSS based on region for the block s. – Prem Patel Nov 18 '17 at 6:01
3
+50

You can add template suggestions. Because menus don't know their region, you first have to add a helper variable in block preprocessing:

function YOURTHEME_preprocess_block(array &$variables) {
  if (!empty($variables['elements']['#id'])) {
    $variables['content']['#attributes']['data-block-id'] = $variables['elements']['#id'];
  }
}

After that you can alter the menu template suggestions

function YOURTHEME_theme_suggestions_menu_alter(array &$suggestions, array $variables) {
  if (isset($variables['attributes']['data-block-id'])) {
    $block = \Drupal\block\Entity\Block::load($variables['attributes']['data-block-id']);
    if ($block) {
      array_unshift($suggestions, 'menu__' . str_replace('-', '_', $block->getRegion()));
    }
  }
}

Now you can use twig templates like menu__REGIONNAME.html.twig for all menus in a given region.

1

For Drop-Down menus in navbar I use Superfish module, which also plays nice on mobile devices. It will give you a block for each menu you want to render with it.

Also very handy is the Menu block module, which helps for example to provide:

additional configuration so you can choose to expand all menu links with children or to root the menu tree to a specific menu item.

Using these modules you may not only be able to render menus differently (which might be done just by using css) but you may also get most work done without styling everything your self.

1
  • Thanks for the modules. Ideally, I'd like to do this without modules, but I will look into these as possible solutions. – harpermd Nov 20 '17 at 22:24
1

You should be able to do that completely with CSS. The different regions should have a wrapping div with a class of "region-name" so you should be able to create some styles that take advantage of this fact:

.regionA .menuname ul {
  ...
}

and then similarly

.regionB .menuname ul {
  ...
}

Depending on how fancy you are making the user interaction you can use the same selectors in your javascript.

1
  • Unfortunately, I actually need to render the HTML in a different manner. Thanks for the tip anyway. – harpermd Nov 20 '17 at 21:13
0

When you edit a block menu, you can change the theme hook in the HTML and style options panel.

For example, if it's your main menu, your theme hook should be something like menu_main. If you apply the same theme hook for all the menus in your sidebar, like menu_custom_sidebar, you'd be able to use the same template for all of these menus : menu--custom-sidebar.html.twig.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.