23

Is there a way to add a hashed link in the menu under drupal menu to just make a menu item that jumps down to an anchor or id on the page?

1

10 Answers 10

16

Unfortunately Drupal cannot do this out of the box. However, you can use the Special menu items module to create a new menu item, and place "nolink" in the path settings.

Special menu items is a Drupal module that provides placeholder and separator menu items.

A placeholder is a menu item which is not a link. It is useful with dynamic drop down menus where we want to have a parent menu item which is not linking to a page but just acting as a parent grouping some menu items below it. A separator menu item is something like "-------" which is not linking anywhere but merely a mean to structure menus and "separate" menu items visually.

screenshot

The module has a Drupal 7 release, created on July 18, 2019. Its functionality has been incorporated in Drupal 8, which means it's not necessary to install it, on a Drupal 8 site.

3
  • 1
    Rather make use of l('linktext', '', array('fragment' => ' ', 'external' => TRUE)); as per @Sebastian's response.
    – Duncanmoo
    Nov 19, 2012 at 11:55
  • "Special menu items" adds a <span title="" class="nolink">...</span>. Problem is nothing but the lack of CSS. Just copy the ul.menu a{} CSS and paste them for ul.menu li span.nolink{}. It's working fine for me. But it disabled the drop-down arrow enabled by li.expanded. :( Oct 6, 2013 at 6:02
  • Sorry to post so late, but I just ran across this thread. Instead of changing the css, you can use a little js to wrap the nolink in an anchor tag with a hash. With jQuery, it'd be jQuery("span.nolink").wrap("<a href='#'></a>"); Oct 16, 2013 at 19:10
16

Follow what reported in a comment for the l() documentation.

To create a link to a named anchor (e.g. "#namedanchor"), you will need to use a small work-around.

l('linktext', '', array('fragment' => 'namedanchor', 'external' => TRUE));

To create a hash-only link (to "#"), you'll need to adapt it to:

l('linktext', '', array('fragment' => ' ', 'external' => TRUE));

(Note that the fragment does contain a space.)

 

In Drupal 7, set "HTML" to TRUE, then append the hash character.

15

http://drupal.org/node/123103#comment-4955236

node/16#gohere

the auto url will change it to be like

about-us#gohere

3
  • 1
    What about staying on the page you are on? For example, trying to get the Skip to Navigation link to take you down to the navigation div regardless of what page you are on? @shanabus
    – kine456
    Mar 4, 2013 at 23:56
  • 2
    Best way to do it, no module or plugin needed! Mar 28, 2014 at 16:43
  • Even works with <front>#gohere. Nice! :)
    – Huelfe
    Mar 14, 2018 at 9:09
7

Try use module Void Menu:

Void menu allows you to configure special values to tags for use in the Drupal 7 menu system. You can customize up to 10 different void tags with any value you wish and use them freely inside the Drupal menu system.
...
As an added bonus, and because of the functionality of this module, you are also able to use actual anchors as menu items that serve no other purpose than placeholders. This is accomplished with a void tag that is set to javascript: void(0); or even a simple hash tag #. The benefit to using this module over special_menu_items for this is that your menus will not require any additional styling to account for the added span tags used by special_menu_items, and will be W3C valid because every anchor must have an href attribute.

It's a very nice solution!

2

Just encountered the same problem. I needed to programmatically add menu-items with hash-links. My code:

// the URL with hash in it is in the form  'normal_part_of_url'#'hash_part_of_url'
$item = array( 
  'link_path' => %normal_part_of_url%,
  'link_title' => %your_link_title%,
  'menu_name' => %menu_where_to_add_links%,
  'options' => array('fragment'=>%hash_part_of_url%)
);
menu_link_save($item);
2

Just setting external to TRUE does it for me. Tested in Druapl 7.32.

l('Some Name', '#', array('external' => TRUE));

1

Using Drupals translation functions also works.

/**
 * Implements hook_menu().
 *
 * Defines a valid link to use when creating menu items.
 */
function greenacorn_menu() {
  $items['<main-content>'] = array(
    'page callback' => 'drupal_not_found',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
  );

  return $items;
}

/**
 * Implements hook_menu_link_alter().
 *
 * Flags the link to be altered at runtime.
 *
 * Note: Changes here would be saved back to the database.
 */
function greenacorn_menu_link_alter(&$item, $menu) {
  if ($item['link_path'] == '<main-content>') {
    $item['options']['alter'] = TRUE;
  }
}

/**
 * Implements hook_translated_menu_link_alter().
 *
 * Refactors the link to go to the fragment #main-content.
 */
function greenacorn_translated_menu_link_alter(&$item, $map) {
  if ($item['link_path'] == '<main-content>') {
    $item['href'] = '';
    $item['localized_options']['fragment'] = 'main-content';
  }
}
1
function test_menu() {
  $items = array();
  $items['sample'] = array(
   'title' => t('Sample page'),
   'type' => MENU_NORMAL_ITEM,
    'menu_name' => 'main-menu',
    'page callback' => 'samplepage',
    'access callback' => TRUE,
    'options' => array('fragment' => 'sampleHash'),
  );
  return $items;
}

You can add hash link to menu using above code.

1
/**
 * Implements hook_module_implements_alter().
 */
function MODULE_module_implements_alter(&$implementations, $hook) {
  if ($hook == 'url_outbound_alter') {
    $stored = $implementations['MODULE'];
    unset($implementations['MODULE']);
    $implementations['MODULE'] = $stored;
  }
}

/**
 * Implements hook_url_outbound_alter().
 */
function MODULE_url_outbound_alter(&$path, &$options, $original_path) {
  if (strpos($path, '#') !== FALSE) {
    $fragment = substr($path, strpos($path, "#") + 1);
    $path = str_replace('#' . $fragment, '', $path);
    $options['fragment'] = $fragment;
  }
}
1
  • 1
    Please don't post "code-only" answers. While this might solve the problem, it doesn't explain to the reader why it solves the problem, or what it provides compared to the alternatives here.
    – Shawn Conn
    Jul 29, 2016 at 21:44
1

install Special menu items and DHTML Menu for hierarchical menus then:

  • add your x-example vocabulary and add to it your terms
  • click modify x-example than in taxonomy menu section set menu location
  • go to the blocs set the menu to a bloc
  • in the menu admin modification you see the terms added automatically
  • click on modify a menu item then past this <void> in the target

now back to your home page and you will see that the menu item that we have modify in the click those not go anywhere

2
  • Welcome to Drupal Q&A. It would be more useful to explain how to use Special menu items instead of just pasting a picture. You may consider enhancing your answer. Thank you.
    – Kojo
    May 23, 2017 at 18:33
  • 1
    i think now it's ok
    – elaz
    Jun 14, 2017 at 15:09

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.