Featured templates

Drupal 7.x. How to create a separator menu item

Ammy Brown February 10, 2015
Rating: 5.0. From 1 vote.
Please wait...

This tutorial is going to show you how to create a separator menu item in Drupal 7 template.

Drupal 7.x. How to create a menu separator menu item

The default menu module does not allow you to add a menu item without menu path. To be able to create a menu item without link, you need to install additional Special menu items module. Using Special menu items module you can add 2 menu types:

  • Separator menu item allows you to separate menus visually. Default separator title is “——-“.

  • No link menu item will be rendered similar to a normal menu link item but there will be no link just the title.

  1. Download and enable Special menu items module. Log into your Drupal admin panel, go under Modules > Install New Module page. Upload the module file from the link or upload file from your computer. Click here to download Special menu items module:

    Drupal_7.x._How_to_create a_menu_separator_menu_item-1

  2. Check the module under Modules tab in your admin panel and click on Save configuration button:

    Drupal_7.x._How_to_create a_menu_separator_menu_item-2

  3. After installing and enabling the module, you can add new menu items. Go under Structure > Menus > Main Menu > Add link tab:

    Drupal_7.x._How_to_create a_menu_separator_menu_item-3

  4. Specify your menu item title, description and other settings. Enter <nolink> to generate non-linkable item, enter <separator> to generate separator item to the path field:

    Drupal_7.x._How_to_create a_menu_separator_menu_item-4

  5. After adding new menu item to the menu you will notice that its style differs from the other menu items. In order to change menu item style, modify css files. Use Firebug for Firefox in order to find out css class for your new menu items. You can follow our video tutorial “How to create CSS rules for specific page in WordPress, Joomla and Drupal“. It will show you how to add a new css class.

  6. Add CSS code for your new menu item at the end of sites/all/themes/theme###/css/style.css file (### is a number).

Feel free to check the detailed video tutorial below:

Drupal 7.x. How to create a menu separator menu item

Themes For Drupal
This entry was posted in Drupal Tutorials and tagged drupal, menu, non-clickable, separator. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket