Magento – How to place top menu to left side bar in magento 2

frontendlayoutmagento2menutopmenu

I have magento 2 installed & working fine. I have a file in app/design/frontend/vendor/theme/Magento_Theme/layout/default.xml

In that from top reference <referenceContainer name="page.top"> I copied this block:

<block class="Magento\Framework\View\Element\Template" name="store.menu" group="navigation-sections" template="Magento_Theme::html/container.phtml">
    <arguments>
        <argument name="title" translate="true" xsi:type="string">Menu</argument>
    </arguments>
</block>

which is used to show top menu & pasted that in new reference (created a new reference):

<referenceContainer name="sidebar.main">
    <block class="Magento\Framework\View\Element\Template" name="store.menu" group="navigation-sections" template="Magento_Theme::html/container.phtml">
        <arguments>
            <argument name="title" translate="true" xsi:type="string">Menu</argument>
        </arguments>
    </block>
</referenceContainer>

so the whole file looks like this:

<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header.container">
            <container name="header.panel.wrapper" htmlClass="panel wrapper" htmlTag="div" before="-"/>
        </referenceContainer>

        <move element="header.panel" destination="header.panel.wrapper"/>
        <move element="top.links" destination="header.panel" after="-"/>
        <move element="catalog.topnav" destination="store.menu" before="-"/>

        <referenceContainer name="page.top">
            <block class="Magento\Framework\View\Element\Template" name="navigation.sections" before="-" template="Magento_Theme::html/sections.phtml">
                <arguments>
                    <argument name="group_name" xsi:type="string">navigation-sections</argument>
                    <argument name="group_css" xsi:type="string">nav-sections</argument>
                </arguments>
                <block class="Magento\Framework\View\Element\Template" name="store.menu" group="navigation-sections" template="Magento_Theme::html/container.phtml">
                    <arguments>
                        <argument name="title" translate="true" xsi:type="string">Menu</argument>
                    </arguments>
                </block>
                <block class="Magento\Framework\View\Element\Text" name="store.links" group="navigation-sections">
                    <arguments>
                        <argument name="title" translate="true" xsi:type="string">Account</argument>
                        <argument name="use_force" xsi:type="boolean">true</argument>
                        <argument name="text" xsi:type="string"><![CDATA[<!-- Account links -->]]></argument>
                    </arguments>
                </block>
                <block class="Magento\Framework\View\Element\Template" name="store.settings" group="navigation-sections" template="Magento_Theme::html/container.phtml">
                    <arguments>
                        <argument name="title" translate="true" xsi:type="string">Settings</argument>
                    </arguments>
                    <block class="Magento\Store\Block\Switcher" name="store.settings.language" template="switch/languages.phtml">
                        <arguments>
                            <argument name="id_modifier" xsi:type="string">nav</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Directory\Block\Currency" name="store.settings.currency" before="store_language" template="currency.phtml">
                        <arguments>
                            <argument name="id_modifier" xsi:type="string">nav</argument>
                        </arguments>
                    </block>
                </block>
            </block>
        </referenceContainer>

        <referenceContainer name="sidebar.main">
            <block class="Magento\Framework\View\Element\Template" name="store.menu" group="navigation-sections" template="Magento_Theme::html/container.phtml">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">Menu</argument>
                </arguments>
            </block>
        </referenceContainer>

    </body>
</page>

Now the problem is when I do the above change then top menu appears in left side bar but from top menu, it becomes disappeared. I don't know how to solve it. If I change the name of that then it is not coming so name must be same i.e. store.menu.

Anyone can please explain how to solve this?

Thank You.

Best Answer

When you first install Magento 2 the home page is displayed using the 1 column layout. you should make a custom layout or modify the 2 Column layout to move the catalog.topnav element to the sidebar.

Related Topic