How can I add a menu link with no URL so I can add a FontAwesome icon link?

Question

How can I make dummy menu links with Drupal?

This image explains my use case.

I want to make a 'dummy' menu item, so that when I click it the search panel opens.

This is simple using HTML, but Drupal won't allow me to add dummy links and forces me to add an existing url to content/node.

For search icon I use FontAwesome, so I need to be able to add tags/classes around the link.

Answer 1

The combination of the following modules should work for your use case :

https://www.drupal.org/project/special_menu_items

• User can create a new menu item and place either "< nolink >" or "< separator >" to the Path field, without quotes.
• "< nolink >" item will be rendered similar to a normal menu link item but there will be no link just the title.
• You can change HTML tag used for menu item
• "< separator >" item will be rendered to an item which is no link and by default title will be "-------".
• Breadcrumb of "< nolink >" will be rendered same as "< nolink >" menu item.
• CSS class "nolink" is added to "nolink" menu item.
• CSS class "separator" is added to "separator" menu item.

https://www.drupal.org/project/menu_attributes

You should use this module when

You want to "nofollow" certain menu items to sculpt the flow of PageRank through your site
You want to give a menu item an ID so you can easily select it using jQuery
You want to add additional classes
or styles to a menu item

The module currently allows you to set the following attributes for each menu item:
Id, Name, Target, Rel, Class, Style, Accesskey

you would first create a nolink menu with css id or class and then apply your fontawesome css and script to open your search field on click.

Answer 2

This sounds like you something the Special Menu Items module is designed for.

But for a more flexible solution, you may want to avoid using the GUI for creating your menu icons, and instead write some custom code that inserts your dummy menu link (which can just link to "#" for example).

There are some other examples and solutions to your issue at this other Drupal Answers thread, including links on using hook_menu_alter() in your custom solution.

Any animations or hiding/showing of the icon and the search bar will need to be created by you using javascript/jQuery.

Answer 3

You need to write that with js and css file. Here some example.

Search button animation

or maybe this

Expanding text box/button

What version of drupal you use..? Drupal 7 or Drupal 8..?