{"id":4653,"date":"2023-04-03T14:00:15","date_gmt":"2023-04-03T12:00:15","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=4653"},"modified":"2023-08-30T13:11:34","modified_gmt":"2023-08-30T11:11:34","slug":"how-to-create-wordpress-menu-items-without-link","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-menu-items-without-link\/","title":{"rendered":"How to Create WordPress Menu Items Without a Link"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]WordPress is a platform that is suitable for everyone, including people with absolutely zero coding knowledge. Pair this CMS with the right WordPress theme, and you can create virtually any kind of <a href=\"https:\/\/www.fixrunner.com\/how-to-make-a-business-website-using-wordpress\/\" target=\"_blank\" rel=\"noopener\">website imaginable<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are some elements that all websites have in common, regardless of the niche. For example, in order to ensure users can find their way around with ease, every website needs to have a good navigation menu. And if you run a multi-layered website with a lot of content, in that case you need to <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-mega-menu-tutorial\/\">create a mega menu<\/a> to enable effective user navigation. <strong>A well-structured menu is an absolute must because it allows users to swiftly find and access parts of a website they\u2019re interested in<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When adding menu items to your menu in WordPress, by default, every item needs to have a link and take the user somewhere upon a click. Of course, there are instances when the link is not needed, when it\u2019s superfluous.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we\u2019ll talk about:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#when-to-use-unlinked-menu-items\">When to Use Unlinked Menu Items<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-menu-item-without-link\">Creating a Menu Item Without a Link<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#make-menu-items-unclickable\">How to Make Menu Items Unclickable<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"when-to-use-unlinked-menu-items\"><\/a>When to Use Unlinked Menu Items<\/h2>\n<p>[\/vc_column_text][vc_column_text]The main purpose of unlinked menu items, which we also call \u201cno-link\u201d or \u201cdead\u201d items, is to create subheadings or group items in a menu. For example, if we have a menu with several pages related to a specific topic, we may want to create one or more unlinked menu items to serve as subheadings for those groups of items.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Furthermore, we can use unlinked menu items for informational or purely decorative purposes. For example, we can add one such item with a divider or an icon to create separate sections in the menu. Alternatively, we may want to add a no-link menu item with some text that provides additional info and thus enhances the navigation and contextual understanding.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now, let\u2019s see how to create WordPress menu items without a link.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"creating-menu-item-without-link\"><\/a>Creating a Menu Item Without a Link<\/h2>\n<p>[\/vc_column_text][vc_column_text]In your admin dashboard, go to <em><strong>Appearance &gt; Menus<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Login-2.jpg\" class=\"attachment-full size-full\" alt=\"Menu Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Login-2.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Login-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Login-2-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under <em><strong>Add menu items<\/strong><\/em>, click on <em><strong>Custom Links<\/strong><\/em>. If you don\u2019t see this option, scroll to the top of the page and in the upper right corner look for <em><strong>Screen Options<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Menu-Screen-Options.jpg\" class=\"attachment-full size-full\" alt=\"Menu Screen Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Menu-Screen-Options.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Menu-Screen-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Menu-Screen-Options-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Click on it, look for the <em><strong>Custom Links<\/strong><\/em>, and check this box.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Menu-Custom-Links.jpg\" class=\"attachment-full size-full\" alt=\"Menu Custom Links\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Menu-Custom-Links.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Menu-Custom-Links-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Menu-Custom-Links-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Let\u2019s go now to <em><strong>Custom Links<\/strong><\/em>. This option will appear in the <em><strong>Add menu items<\/strong><\/em> section. In the <em><strong>URL<\/strong><\/em> field enter a hashtag <em><strong>(#)<\/strong><\/em>. In the <em><strong>Link Text<\/strong><\/em> field enter the name of the menu item you\u2019re about to create.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Add-menu-custom-link.jpg\" class=\"attachment-full size-full\" alt=\"Add menu custom link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Add-menu-custom-link.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Add-menu-custom-link-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Add-menu-custom-link-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you finish, press the <em><strong>Add to Menu<\/strong><\/em> button. Once you save the changes the new menu item will appear within the menu structure on the right.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can now click on the menu item to open its options. If you leave the \u2018#\u2019 sign in the URL field, the new menu item will appear as if it were linked, but, upon clicking on it, users will go back to the top of the page they\u2019re currently browsing. If you delete the hashtag and leave the field empty, the page they\u2019re browsing will refresh when they click on the menu item. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/URL-field.jpg\" class=\"attachment-full size-full\" alt=\"URL field\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/URL-field.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/URL-field-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/URL-field-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Luckily, there\u2019s a simple solution to this as well.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;latest-themes&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"make-menu-items-unclickable\"><\/a>How to Make Menu Items Unclickable<\/h2>\n<p>[\/vc_column_text][vc_column_text]To make it clear that a menu item is unlinked, you can also make the mouse cursor display as the default icon when a user hovers over that menu item. If you\u2019re using one of Qode Interactive\u2019s <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">premium WordPress themes<\/a>, you can do this by simply checking the <em><strong>Don\u2019t link<\/strong><\/em> box.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Make-it-clear-that-a-menu-item-is-unlinked.jpg\" class=\"attachment-full size-full\" alt=\"Make it clear that a menu item is unlinked\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Make-it-clear-that-a-menu-item-is-unlinked.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Make-it-clear-that-a-menu-item-is-unlinked-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Make-it-clear-that-a-menu-item-is-unlinked-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will not only show the default cursor upon hover, but will also make the menu item unclickable (i.e. if a user clicks on the menu item, nothing will happen).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In case you are not using one of our themes, you can keep the default cursor on hover and make the link unclickable via some simple CSS. In <em><strong>Appearance &gt; Menus<\/strong><\/em> click on <em><strong>Screen Options<\/strong><\/em> at the top of the page and make sure the <em><strong>CSS Classes<\/strong><\/em> box is checked.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Check-CSS-Classes.jpg\" class=\"attachment-full size-full\" alt=\"Check CSS Classes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Check-CSS-Classes.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Check-CSS-Classes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Check-CSS-Classes-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, go to the menu item you\u2019ve previously unlinked and look for the <em><strong>CSS Classes<\/strong><\/em> option. Write <em><strong>unclickable<\/strong><\/em> in that field and then click <em><strong>Save Menu<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Unclickable-Option.jpg\" class=\"attachment-full size-full\" alt=\"Unclickable Option\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Unclickable-Option.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Unclickable-Option-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/02\/Unclickable-Option-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now that you have created the class, add the following code to your CSS:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.unclickable &gt; a {\r\npointer-events: none;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]And that\u2019s all there is to it. Users now won\u2019t be able to click on any menu item with the unclickable class.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-theme-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">\u2026and That\u2019s a Wrap!<\/h2>\n<p>[\/vc_column_text][vc_column_text]We\u2019ve come to the end of our tutorial on how to create WordPress menu items without a link, and we\u2019ve also showed you how to make your pointer on hover disappear. As you make modifications in your admin dashboard and in CSS, don\u2019t forget to <strong>save all the changes you make along the way<\/strong>. And remember, clear navigation is a very important component of a good UX. Your visitors should be able to seamlessly go from one page to the next, so plan your menu structure well, but also feel free to experiment with the look of the menu. Explore the possibilities of <a href=\"https:\/\/qodeinteractive.com\/magazine\/web-design-hidden-menus\/\">hidden menus<\/a> or <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-fullscreen-navigation-menus\/\">fullscreen navigation<\/a>, but always make sure that your website is understandable and easy to use.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In this guide we\u2019ll show you how to create WordPress menu items without a link and also how to make your pointer on hover disappear, so dive right in\u2026<\/p>\n","protected":false},"author":4,"featured_media":6734,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,20,4,13],"class_list":["post-4653","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-css","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/4653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=4653"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/4653\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/6734"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=4653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=4653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=4653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}