I have a main menu with primary, secondary and tertiary links. The primary links will be positioned top right of the page. I want the sub menus (secondary/tertiary links) to print in a separate wrapper that will span the width of the browser. I cannot use absolute position because I need the sub menu to push down the content below it when I hover over the primary links. How can I do this with templates?

enter image description here


Check out the theme_menu_link and theme_menu_tree hooks. You can add them to a custom theme, and they give you full access to the links as they are built.

Take a look at the following line in theme_menu_link:

if ($element['#below']) {
  $sub_menu = drupal_render($element['#below']);

If you add a test to check if the link being tested is top tier than you can change the $element['#below'] to suit your needs. checking for top tier is as simple as

$element['#original_link']['plid'] == 0

The parent link id of top tier elements is 0, so this works out. Then, if it is top tier and has links below it, add a theme wrapper that will allow you do what you want it to. For example:

if ($element['#below']) {
  if ($element['#original_link']['plid'] == 0){
    $element['#below']['#theme_wrappers'][] = 'my_custom_theme_wrapper';
  $sub_menu = drupal_render($element['#below']);

I am seeing the original theme wrapper is menu_tree__main_menu. If you want to completely replace it use you should unset that one, then set a new one as mentioned above.

If you want some pointers on theme wrappers check this post.

  • This looks like substantially the right approach, I gave an answer to a similar question with a few more details here: drupal.stackexchange.com/questions/145383/… – bloke_zero Feb 6 '15 at 10:07
  • Thanks for the feedback. I asked a similar question about showing secondary and tertiary menus of an active parent link to the right. Would the same answer apply? Question is here: drupal.stackexchange.com/questions/146218/… – srodrig Feb 18 '15 at 17:09
  • It would be similar. As @Robin mentions using menu block is probably the way to go. Then, once the block is output on the page, you can use the hooks I mentioned above to change the themeing of the menu block being output. You can access those blocks by checking if(isset($element['#bid']['module']) && $element['#bid']['module'] == 'menu_block'), then if you need a specific menu block check $element['#bid']['delta'] == [block delta here]. I will add an answer to the other post to demonstrate adding a toggle to the sidebar menus only. – wolffer-east Feb 19 '15 at 15:13
  • After taking another look at the other question it looks like @Robin answered it as asked. If you have more specific theme questions that dont fit under either of these two questions can you add another question? That way we don't lose the answers to these two questions by changing up the question after the answers have already been given. Thanks! – wolffer-east Feb 19 '15 at 15:23

I think you should create a menu block for the 1st and one for the 2+ level of main menu which you can format with css separately.

  • This will not work. The 2+ level links don't display at all. And I need to have the different level links still related to each other in some way so that when hovering over parent links the secondary wrapper opens and pushes down the content below it. I am looking for a solution using templates. – srodrig Feb 5 '15 at 18:08

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.