[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

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

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