How make top level menu item not have link, but have sub-menus that are linked?

  • I'm building a horizontal menu and some of the entries on that menu will have dropdowns (sub-menus), and some won't. Those that have sub-menus are not actually pages. They're just meant to be guides for the dropdowns.

    For instance, say the the horizontal menu is like follows:

    Home | About Us | Products | Directions | Contact

    And the "products" li item is meant to have 3 pages linked in a vertical dropdown list below it, so "products" itself doesn't actually represent a page, how can I do that in WP?

    (I use WP as a CMS, with static home and inside pages. I build my own templates, style the menus in CSS, then register the menus in the functions.php and call them in the templates.) In WP you add entries to the menus via the list of pages, or by the custom links. But I don't want "products" to be linked. If I don't add a link to the custom link it won't let me add it to the menu.

    Is this doable through the menus admin or do I have to approach it some other way?

    Thank you for any help!

    heres the solution works great go check it

    In the URL box, leave it blank.

    Nobody mentioned the WP_NAV_MENU_WALKER Class, you could write your own walker that spits out what you want.

  • Brooke.

    Brooke. Correct answer

    9 years ago

    I have a few ideas:

    1. Set the custom link to # which won't return anything
    2. Add a custom class to the items and then use jQuery to remove the links.
    3. Use a PHP equivalent to the jQuery method
    4. Use the Disable Parent Menu Link plugin (or take it apart and write your own)

    Thank You for the tips and links! As Gavin suggested, using a # for a custom link "works"; the other options may work better, though aren't as easy. Well, the plugin is probably easy but I hate to use plugins if I can accomplish the same thing more directly. I'll have to decide the best approach. Thanks again!

    If you plan to use it in tactile devices, be careful with using empty `href=""`because most tactile device users won't be able to see dropdown menu without using JS

    Links break. You might want to work a few of these ideas into your answer

    Also, #2 and #3 refer to `wp_list_pages()`, not `wp_nav_menu()`

License under CC-BY-SA with attribution

Content dated before 6/26/2020 9:53 AM