How do I add a target="_blank" attribute to menu items?

By smithaa02 on 11 Dec 2006 at 15:25 UTC

Basically, I want one of my menu items, to link to a new page, as opposed to opening in the present page. Is there a way to do this?

Comments

By theming

Anonymous (not verified) commented 11 December 2006 at 15:36

The only way I can think of is to do it by theme in block.tpl.php.

You insert target="_blank" in each a tag that does not contain a link inside your site (everything unlike '/path/to/node' and 'http://www.yoursite.com/').

page.tpl

glendac commented 11 December 2006 at 17:04

This thread (http://drupal.org/node/64892) might help show you what code and where to insert it in the page.tpl.php file of your site's theme. But most page templates deal only with the $primary_links and $secondary_links variables and might not cover menu items with external links that you want to create. You might have to look elsewhere to make changes. I'm looking into this myself and here are some Drupal theming pages that I'm looking at:

Use jQuery instead

tanepiper commented 11 December 2006 at 17:02

Hey, instead of using target="" which breaks XHTML validation, use JavaScript instead.

Find out what the class or ID of your link is. For example, if it's menu-1-2 then use the below code:

drupal_add_js ('$(document).ready(function(){$("a.menu-1-2").click(function() { window.open(this.href); return false; }    ); } );', 'inline' );

You can insert this in your template.php file.

not working?

Koen_Vanmeerbeek commented 24 July 2008 at 11:31

Hallo,

I tried this code, but it doesn't seem to work... I use Drupal 5. Maybe something changed?

Koen

Seems to work in 6

bwoods commented 17 October 2008 at 20:26

Although I'm not sure this is really preferable, considering that for any link that I need to open, I'll need to specify the ID/class separately. Furthermore, with the menu build, there's no guarantee that I'll have a unique ID/class to use, which seems a bit strange.

Try this

aligator_king commented 1 October 2010 at 19:45

drupal_add_js ('$(document).ready(function(){$(" #menu-3030 a").each(function(){$(this).attr({ target: "_blank" });}); } );', 'inline' );

It's works in Drupal 6

jrdd

Try this

jetnet commented 20 January 2009 at 23:19

Try this insted:

drupal_add_js ('$(document).ready(function(){ $(\'a[@href^="http"]\').each(function(){$(this).attr({ target: "_blank" });}); } );', 'inline' );

That will make ANY link that has begins with http, open in a target="_blank".

Great idea, but ...

bwoods commented 23 January 2009 at 01:51

This doesn't seem to work with the pathauto module, since the generated links contain http.

target=_blank in primary links menu

jeffschuler

Boulder, Colorado

commented 10 June 2009 at 17:11

For adding target="_blank" to primary links menu items in Drupal 5 and 6, see Open link in new window.

The solution uses Drupal's menu_item_link theme hook.

Here is the solution ;-)

ranj.sarraj commented 18 November 2009 at 08:50

http://drupal.org/node/335853#comment-2278626

Can't figure out a way to to

doublejosh commented 7 January 2010 at 04:30

Can't figure out a way to to it at the module level, but I went for a theme level solution for now...

function phptemplate_menu_item_link($link) {

  if($link['link_path'] == 'http://www.tableausoftware.com/community/forums') {
    	$link['options']['attributes']['target']='_blank';
  }
  return l($link['title'],$link['link_path'],array('attributes'=>$link['options']['attributes']) );

}

...however, be aware that this does not rebuild using all options that might be on the link... like fragments and queries, etc.

I was shortsighted. Here is the RIGHT WAY in D6.

doublejosh commented 7 January 2010 at 21:09

Here is the proper way to drop in from link overrides for special circumstances. (In my case target="_blank")

function MY-THEME_menu_item_link($link) {

  // Just an initializer
  if (empty($link['localized_options'])) {
    $link['localized_options'] = array();
  }

  // If an item is a LOCAL TASK, render it as a tab
  if ($link['type'] & MENU_IS_LOCAL_TASK) {
    $link['title'] = '<span class="tab">' . check_plain($link['title']) . '</span>';
    $link['localized_options']['html'] = TRUE;
  }
  
  // ALTERING YOUR SPECIAL LINKS. I WAS LOOKING FOR TARGET=_BLANK
  // You can also do this by checking $link['path'] with a substring, but I opted just for integer comparison for now.

  if($link['mlid'] == 1210) { //http://www.tableausoftware.com/community/forums
    	$link['localized_options']['attributes']['target']='_blank';
  }
  
  // Proper way to return the link preserving all the extra options.
  return l($link['title'], $link['href'], $link['localized_options']);

}

This works for me

bwoods commented 17 January 2010 at 17:46

I should probably test a bit more, but I don't see any issues yet. Thanks doublejosh!

In Drupal 7

hwi2 commented 14 December 2012 at 02:46

You can use hook_menu_link_alter like this

function hook_menu_link_alter($item)
{
	if($item['link_path']=="admin/drupal-tutorial")
	{
		$item['options']['attributes']['target'] = '_blank';
	}
}

Hello,

kumkum29 commented 1 November 2013 at 17:47

Hello,

i want to add a target destination to a menu item.
Your hook work with admin page links:

if($item['link_path']=="admin/content") {
     $item['options']['attributes']['target'] = '_blank';
}

But it does not work with menu items (eg products or node/2 ...).

if($item['link_path']=="products") {
     $item['options']['attributes']['target'] = '_blank';
}

I do have a special code for it?

If I do a print_r in this hook, I get nothing :

function MyTheme_menu_link_alter(&$item) {
	print_r($item);

Thank you for your help.

I was shortsighted. Here is the RIGHT WAY in D6.

doublejosh commented 7 January 2010 at 21:10

Whops. double post.

This works, I guarantee you ;-)

ranj.sarraj commented 2 February 2010 at 12:08

go to theme folder and add the following javascript to page.tpl.php file before tag

<script> 
window.onload = function() {
   if (!document.getElementsByTagName) return false;
   var links = document.getElementsByTagName("a");
   for (var i=0; i<links.length; i++) {
      if (links[i].getAttribute("href").match('#newpagemenu') == "#newpagemenu") {
         links[i].onclick = function() {
            return !window.open(this.href);
         }
      }
   }
}
</script>

them go the menu and add #newpagemenu to each item that you want to be open in new target, I had test it and it should work

help

Zead_shaher commented 20 July 2010 at 11:45

Hi
I'm trying to use, but where i have to put newpagemenu ?
If i put in URL field....give me error

Thanks a lot !!! Work perfectly!

add it in the URL field as bookmark

ranj.sarraj commented 11 August 2010 at 14:28

you should add #newpagemenu instead newpagemenu after the link and it should work

Best
Blade

A solution.

JaceRider commented 27 August 2010 at 17:39

For single links you can control target attribute with the following.

.l('image or text', 'link', array('html' => TRUE, 'attributes' => array('target' => '_blank')));

Attributes are added to the a tag as if you wrote straight html. Above would output as <a target="_blank">, you can literally add anything to the html. For instance if you input 'attributes' => array('asdfasdf' => 'asdfasdf'), drupal would output <a asdfasdf="asdfasdf">. Full of sweetness.

If you have to open a link in

the_g_bomb commented 21 December 2010 at 13:42

If you have to open a link in a new browser window you should actually use something like:

.l('image or text', 'link', array('attributes' => array('onclick' => 'window.open(this.href); return false;')));

target="_blank" is an out-dated practice, it won't validate if you are using xhtml strict and is not allowed in html5.

--
G

target="_blank" is back in

kari.kaariainen commented 1 June 2016 at 19:29

target="_blank" is nowadays back in HTML5.

D7 Marinelli

cory.rusher commented 15 September 2017 at 16:38

Works great, Thanks

Or a simpler method...

adam_b commented 21 December 2010 at 15:25

use http://drupal.org/project/menu_attributes

bunch of solutions

gmoreno commented 8 June 2011 at 17:15

All solutions are great

I gave a try to the menu attributes and worked just fine, a few months ago I was working in a way to implement keyboard usage in nice menus generated menu items and I created a small script so I could surf the links with the keyboard, I had to tweak nice menus module to be able to add ID's to the menu items so I would be able to surf through them back and forth. I didn't knew about this menu attributes module otherwise I wouldn't spend time on adding Id to the items and sub items in the menus.

Thanks to all

germancito

      $(document).ready(function (){
        $('a[href][rel="external"]').click(
          function () {
            window.open($(this).attr('href')); return false;
          }
        );
      });

that will search for any [a] tag (that has the attributes html and rel="external") and change its onClick event.
Ex.:<a href="http://www.exemple.com" rel="external">Some external link</a>