This is my HTML of sidebar which shows the Main Menu

<aside id="sidebar-first" role="complementary"><div class="region region-sidebar-first">
  <div id="block-system-main-menu" class="block block-system contextual-links-region block-menu">

        <h2>Main menu</h2>
    <div class="contextual-links-wrapper contextual-links-processed"><a class="contextual-links-trigger" href="#">Configure</a><ul class="contextual-links"><li class="menu-list first"><a href="/nic/admin/structure/menu/manage/main-menu/list?destination=node/33">List links</a></li>
<li class="menu-edit"><a href="/nic/admin/structure/menu/manage/main-menu/edit?destination=node/33">Edit menu</a></li>
<li class="block-configure last"><a href="/nic/admin/structure/block/manage/system/main-menu/configure?destination=node/33">Configure block</a></li>
  <div class="content">
    <ul class="menu"><li class="first leaf"><a href="/nic/">Home</a></li>
<li class="expanded active-trail"><a href="/nic/projects" class="active-trail">Projects</a><ul class="menu"><li class="first expanded active-trail"><span class="active-trail nolink">Web Projects</span><ul class="menu"><li class="first last leaf active-trail"><a href="/nic/node/33" class="active-trail active">Project 1</a></li>
<li class="last leaf"><span class="nolink">Desktop Projects</span></li>
<li class="leaf"><a href="/nic/about">ABOUT US</a></li>
<li class="last leaf"><a href="/nic/node/22">SERVICES</a></li>
</ul>  </div>

</div> <!-- /.block -->
 <!-- /.region -->

Currently my code is look like below image:

enter image description here

but i want it show like

  • Home
  • Project
  • About us

When i click on "Project" then web projects and desktop projects open. Similarly when i click on Web projects then project 1 open in the sidebar same as this link http://www.menucool.com/vertical/accordion-menu which shows the menu at right side bar

enter image description here


@Sumit, You will need to install the Menu Block module along with the Accordion menu.

The accordion menu by default provides you with 2 blocks. You can find them in the block configuration page i.e admin/structure/block. Follow the below steps and you can get your menu displayed in the accordion style.

Step 1: Click on configure against any of the two blocks provided by the module.

Step 2: You can provide any block title and any menu name. Make sure in the Menu Source dropdown, you select the appropriate menu. You can leave rest all settings as it is.

Step 3: Provide the region in which you wish to display the menu. Set the visibility of the block accordingly.

Step 4: Save the block settings.

Step 5: Flush cache.

The accordion menu block should now be visible. Refer the Readme.txt provided along with the Accordion Menu for further clarifications.

| improve this answer | |
  • can you please tell me what is the role of menu block module? – Sumit Aggarwal Oct 26 '16 at 8:48

The Accordion Menu module is available. Please try this module hope this will help you.

This module will display a menu using a jQuery UI accordion effect.

The 6.x-1.x and 7.x-1.x releases support the same features. Features in version 6.x-1.2 (and above) include:

  • Multiple menu blocks, each separately configurable
  • Menu source may be a Menu block sub-menu definition or a Drupal menu
  • Setting to render the header menu item as a non-link (to avoid conflict between the accordion effect and the link behavior)
  • Setting to not expand a header menu item even if it is in the active trail
  • Setting for scope (see drupal_add_js())
  • Settings for all published jQuery UI accordion options.
  • Theme suggestions and template
  • Multiple CSS classes including zebra, menu link ID, and count
| improve this answer | |
  • how can i use this module. there is no documentation can you please provide me steps – Sumit Aggarwal Oct 26 '16 at 5:40
  • Readme.txt is available in the module. Have you checked that document. – Pallavi Sugandhi Oct 26 '16 at 5:43
  • Can you please tell me how i configure the accordian menu to the main menu? – Sumit Aggarwal Oct 26 '16 at 5:48
  • @ajitS: i didn't understand: i create the menu blocks name custom menu and add child menu links under this like custom menu -> web projects -> project 1 and now i want it to show as accordian am stuck – Sumit Aggarwal Oct 26 '16 at 7:06
  • @sumit: First you need to create a custom menu i.e admin/structure/menu . Then create new menu block or use existing Mneu block and then select custom menu in that block. – Pallavi Sugandhi Oct 26 '16 at 7:15

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