Back to Top

Magento 2 Development 27: Front-end Menus

Updated 12 March 2024

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 create it as route_controller_action.xml. But since we want to show these menus on all the pages, we will create the layout xml file with the name default.xml.

So let’s create view/frontend/layout/default.xml

Code for view/frontend/layout/default.xml file

<?xml version="1.0"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <!-- Code for Header Link -->
        <referenceBlock name="header.links">
            <block class="Magento\Framework\View\Element\Html\Link" name="blog-header-menu">
                    <argument name="label" xsi:type="string" translate="true">Blogs</argument>
                    <argument name="path" xsi:type="string">blog</argument>

        <!-- Code for Footer Link -->
        <referenceBlock name="footer_links">
            <block class="Magento\Framework\View\Element\Html\Link" name="blog-footer-menu">
                    <argument name="label" xsi:type="string" translate="true">Blogs</argument>
                    <argument name="path" xsi:type="string">blog</argument>

Magento page structure has multiple nested containers and blocks (something like a nested div structure). 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.

Searching for an experienced
Magento 2 Company ?
Find out More

With the referenceBlock tag, we can access the blocks and make some changes to that block. Similarly, if we want to reference a container we use referenceConrainer. Which we have already seen for content container.

In the first part, we have used the referenceBlock to access the header menu which has header.links as block name. 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.

Inside the referenceBlock we have used a block tag. So our new block will be added as a nested block inside the header block. 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.

Inside the block 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.

Similarly, we have created a second menu for the footer. The footer menu is inside the footer_links block.

Now you should see the menus on front-end as shown below,


You can find different ways to create different types of links at Header and Top links in Magento 2

Next Blog -> Coming Soon.

Previous Blog -> Magento 2 Development 26: Blog Listing

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home