Magento 2 Development 27: Front-end Menus

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

Searching for an experienced
Magento 2 Company ? Find out More

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

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

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

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.

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

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.

Next Blog -> Coming Soon.

Previous Blog -> Magento 2 Development 26: Blog Listing