Drupal 7 Tutorial Part 9: How to re order menu links using drag & drop / menu links weights

posted Jun 23, 2011, 6:05 AM by admin@ revitviet.vn

Hi Drupalers,

In last tutorial, we saw how to create a new menu from scratch. In this tutorial we are going to learn below mentioned topics.

  • Changing order of menus using drag & drop / weight option inside menu edit page.

How to reorder menu links in drupal 7 ?

         In last tutorial we created menu called "Administration Shortcuts" with two links. Let's reorder these menu links. You can see menu in the left side bar as shown below.

In the menu "blocks landing page" link appears first then "user listing". Let's change this order of menu links. To quickly navigate to administration of this menu, login as admin and hover on the block. You can see a wheel like icon on top. Click on that icon. Then, click on "list links" link to go to list of links in this menu. You will see something like below.


Now take your mouse on top of block landing page, hold the right mouse button and drag it to down. Once you drag it to down holding mouse button, screen will look like below.


By dragging the link downwards, you reordered the menu link. Now click  on save below to save the changes. After saving go to home page to see the changes. Now user listing comes on top.

How to reorder menu links in Drupal 7 using weights ?:

   In last section, we saw how to reorder menus using drag and drop feature. Let's see now how to reorder the menus using weight option. Both, will do the same job actually. Now by changing the weights let's reorder our menu links.

  Open the list of "Administration Shortcuts" links just by following steps discussed above. You will see the page like in screen shot 2. As you see now "User listing" links appears first then "Blocks landing page" appears second. Let's change this order.

  • Click on edit link next to "User listing" link. Then choose weight select box just above save button. You will see something like below.

  • Remember lighter one floats and heavier one sinks. Means smallest number goes to top and highest number to bottom.
  • As you see currently this menu link has weight -50 and "Blocks landing page" has weight -49. Since we know -50 < -49 "Blocks landing page" goes down.
  • Change the menu link "user listing" weight to "-48" so that it goes below "Blocks landing page" since -49 < -48.
  • After changing from -50 to -48 click on save. To see the change go to home page. Now "Blocks landing page" appears first. We normally adjust weights of menu links relatively to other links in the menu.

In drupal 7, where ever weights appears they follow the same rule. Lighter one floats and heavier one sinks. Means smallest number goes to top and highest number to bottom.

Hope, you learnt how to reorder menus and how to use weights concepts. Stay tuned for more tutorials.


Anil Sagar