{"id":300516,"date":"2021-08-09T10:15:39","date_gmt":"2021-08-09T10:15:39","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=300516"},"modified":"2024-11-12T05:15:20","modified_gmt":"2024-11-12T05:15:20","slug":"magento-2-development-24-front-end-menus","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/","title":{"rendered":"Magento 2 Development 27: Front-end Menus"},"content":{"rendered":"\n

Before creating the blog view page, let’s add some links with which any user can access the blog list page. <\/p>\n\n\n\n

In this blog, we will add one header and one footer link. To add the menus\/links we will use the layout files.<\/p>\n\n\n\n

If we want to create a layout file for a specific page we create it as route_controller_action.xml<\/strong>. But since we want to show these menus on all the pages. <\/p>\n\n\n\n

We will create the layout xml file with the name default.xml<\/strong>.<\/p>\n\n\n\n

So let’s create view\/frontend\/layout\/default.xml<\/em><\/p>\n\n\n\n

Code for view\/frontend\/layout\/default.xml<\/em> file<\/p>\n\n\n\n

<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <body>\n        <!-- Code for Header Link -->\n        <referenceBlock name="header.links">\n            <block class="Magento\\Framework\\View\\Element\\Html\\Link" name="blog-header-menu">\n                <arguments>\n                    <argument name="label" xsi:type="string" translate="true">Blogs<\/argument>\n                    <argument name="path" xsi:type="string">blog<\/argument>\n                <\/arguments>\n            <\/block>\n        <\/referenceBlock>\n\n        <!-- Code for Footer Link -->\n        <referenceBlock name="footer_links">\n            <block class="Magento\\Framework\\View\\Element\\Html\\Link" name="blog-footer-menu">\n                <arguments>\n                    <argument name="label" xsi:type="string" translate="true">Blogs<\/argument>\n                    <argument name="path" xsi:type="string">blog<\/argument>\n                <\/arguments>\n            <\/block>\n        <\/referenceBlock>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
Magento page structure has multiple nested containers and blocks (something like a nested div structure). <\/p>\n\n\n\n
You can view all the .phtml and blocks that get called on a particular page by enabling “Enable Template Path Hints for Storefront” from the admin.<\/p>\n\n\n\n
With the referenceBlock<\/strong> tag, we can access the blocks and make some changes to that block. <\/p>\n\n\n\n
Similarly, if we want to reference a container we use referenceConrainer<\/strong>. Which we have already seen for content<\/strong> container.<\/p>\n\n\n\n
In the first part, we have used the referenceBlock<\/strong> to access the header menu which has header.links<\/strong> as block name. <\/p>\n\n\n\n
You can find some of the commonly used block names by googling. But for some specific blocks, you will have to dive deep into Magento’s core codes.<\/p>\n\n\n\n
Inside the referenceBlock<\/strong> we have used a block<\/strong> tag. So our new block will be added as a nested block inside the header block. <\/p>\n\n\n\n
Note that for our block we can use any name. But it is good practice to give a sensible name and also append or prepend the module name to make it unique.<\/p>\n\n\n\n
Inside the block<\/strong> tag, we have passed the arguments that is the label and the path of the menu. We can also customize the link a little bit by passing some other arguments.<\/p>\n\n\n\n
Similarly, we have created a second menu for the footer. The footer menu is inside the footer_links<\/strong> block.<\/p>\n\n\n\n
Now you should see the menus on front-end as shown below,<\/p>\n\n\n\n
\"mGk3cIb-3\"<\/figure>\n\n\n\n

You can find different ways to create different types of links at Header and Top links in Magento 2<\/a> <\/p>\n\n\n\n
Furthermore, there is no necessity to look beyond this point; take advantage of the opportunity to initiate your projects with the recommended Magento development company<\/a>.<\/p>\n\n\n\n
Next Blog -> Coming Soon.<\/p>\n\n\n\n
Previous Blog -> Magento 2 Development 26: Blog Listing<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Before creating the blog view page, let’s add some links with which any user can access the blog list page. In this blog, we will add one header and one footer link. To add the menus\/links we will use the layout files. If we want to create a layout file for a specific page we […]<\/a><\/p>\n","protected":false},"author":201,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[2056,2460,2070],"class_list":["post-300516","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-magento","tag-magento-2","tag-magento2"],"yoast_head":"\nMagento 2 Development 27: Front-end Menus - Webkul Blog<\/title>\n<meta name=\"description\" content=\"we will add one header and one footer link. To add the menus\/links we will use the layout files.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2 Development 27: Front-end Menus - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"we will add one header and one footer link. To add the menus\/links we will use the layout files.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-09T10:15:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-12T05:15:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/08\/mGk3cIb-3-1200x647.png\" \/>\n<meta name=\"author\" content=\"Sanjay Chouhan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sanjay Chouhan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/\"},\"author\":{\"name\":\"Sanjay Chouhan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\"},\"headline\":\"Magento 2 Development 27: Front-end Menus\",\"datePublished\":\"2021-08-09T10:15:39+00:00\",\"dateModified\":\"2024-11-12T05:15:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/\"},\"wordCount\":408,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/08\/mGk3cIb-3-1200x647.png\",\"keywords\":[\"magento\",\"Magento 2\",\"Magento2\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/\",\"url\":\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/\",\"name\":\"Magento 2 Development 27: Front-end Menus - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/08\/mGk3cIb-3-1200x647.png\",\"datePublished\":\"2021-08-09T10:15:39+00:00\",\"dateModified\":\"2024-11-12T05:15:20+00:00\",\"description\":\"we will add one header and one footer link. To add the menus\/links we will use the layout files.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/mGk3cIb-3.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/mGk3cIb-3.png\",\"width\":1719,\"height\":927,\"caption\":\"mGk3cIb-3\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Magento 2 Development 27: Front-end Menus\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\",\"name\":\"Sanjay Chouhan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sanjay Chouhan\"},\"sameAs\":[\"https:\/\/www.instagram.com\/sanjaychouhansc\/\",\"https:\/\/in.linkedin.com\/in\/scchouhansanjay\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Magento 2 Development 27: Front-end Menus - Webkul Blog","description":"we will add one header and one footer link. To add the menus\/links we will use the layout files.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/","og_locale":"en_US","og_type":"article","og_title":"Magento 2 Development 27: Front-end Menus - Webkul Blog","og_description":"we will add one header and one footer link. To add the menus\/links we will use the layout files.","og_url":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2021-08-09T10:15:39+00:00","article_modified_time":"2024-11-12T05:15:20+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/08\/mGk3cIb-3-1200x647.png","type":"","width":"","height":""}],"author":"Sanjay Chouhan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sanjay Chouhan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/"},"author":{"name":"Sanjay Chouhan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462"},"headline":"Magento 2 Development 27: Front-end Menus","datePublished":"2021-08-09T10:15:39+00:00","dateModified":"2024-11-12T05:15:20+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/"},"wordCount":408,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/08\/mGk3cIb-3-1200x647.png","keywords":["magento","Magento 2","Magento2"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/","url":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/","name":"Magento 2 Development 27: Front-end Menus - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/08\/mGk3cIb-3-1200x647.png","datePublished":"2021-08-09T10:15:39+00:00","dateModified":"2024-11-12T05:15:20+00:00","description":"we will add one header and one footer link. To add the menus\/links we will use the layout files.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/mGk3cIb-3.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/mGk3cIb-3.png","width":1719,"height":927,"caption":"mGk3cIb-3"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/magento-2-development-24-front-end-menus\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Magento 2 Development 27: Front-end Menus"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462","name":"Sanjay Chouhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sanjay Chouhan"},"sameAs":["https:\/\/www.instagram.com\/sanjaychouhansc\/","https:\/\/in.linkedin.com\/in\/scchouhansanjay"],"url":"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/300516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/201"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=300516"}],"version-history":[{"count":9,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/300516\/revisions"}],"predecessor-version":[{"id":473538,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/300516\/revisions\/473538"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=300516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=300516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=300516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}