Menu Close
    Searching for an experienced Magento 2 Development Company ?

    Magento 2 Development 24: 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 name default.xml .

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

    <?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 have multiple nested containers and blocks (something like nested div structure). You can view all the .phtml and blocks that gets called on particular page by enabling “Enable Template Path Hints for Storefront” from admin.

    With 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 first part we have used referenceBlock to access the header menu which have 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 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 customise the link a little bit by passing some other arguments.

    Similarly we have created the 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,

    mGk3cIb-3


    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 23: Blog Listing

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top