How to display top menu categories vertical left.

[due_nguyen]

I am new to magento and we are using magento 2. I need to move the navigation categories horizontal on top to vertical left side.

Thank you in advance

[Vimal Kumar]

Hi @due_nguyen,

You can move top navigation bar to left using some customizations in the xml file. 

You need the following update in the Magento_Theme layout default.xml.

<move element="catalog.topnav" destination="sidebar.main" />

for more info :

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html#layout_markup_rea... 

I hope it will help you!

[magentopatch]

This actually worked for me and its a perfect solution if you want the top menu moved to the side bar for magento 2 

I am using magento 2.3.4

Thank you so much for the solution

[magentopatch]

I forgot to mention.... the directory where u need to modify the default.xml is

/public_html/vendor/magento/module-theme/view/frontend/layout

I added this line <move element="catalog.topnav" destination="sidebar.main" /> below this block class line

<block class="Magento\Theme\Block\Html\Header" name="header" as="header" before="-">

[master452a3b58]

Thank, you, that really works.

But is there a way to copy the menu and not move?

What I want to do:

- Top navigation linking to some pages and the main category page

- Vertical Left navigation with linking all categorys

How can this be done?

[Magento231]

I believe you are looking for CMS Pages Navigation Menu extension. With this extension, you can create a menu, in which CMS page can be assigned. Clear navigation helps to control all CMS pages easily at the frontend. Besides, it also helps you to decorate your menu not just the main information at the center, not just the wish-list table or compare products, they also see the neatly arranged “menu category tree”, ordered by menu title. View more full features: https://www.magesolution.com/cms-pages-navigation-for-magento-2.html

[basabhatgmf4ea]

It worked when I interspersed the line as follows.

<referenceBlock name="top.links">
<block class="Magento\Theme\Block\Html\Header" name="header" as="header" before="-">
<arguments>
<argument name="show_part" xsi:type="string">welcome</argument>
</arguments>
</block>
</referenceBlock>
<move element="catalog.topnav" destination="sidebar.main" />
<referenceContainer name="main.content">

The way you suggested, it crashed. 

It listed the top menu categories in the side bar. The sub-categories still listed vertically. 

How to fix it?

[magezon]

Hi, 

You can consider Ninja Menus by Magezon that supports vertical menus. Everything will be done quickly with a drag & drop interface. 

Besides, you can choose other menu types including horizontal, accordion and drill-down menus. 

You can create eye-catching menus that are responsive on all devices. And many other amazing features to explore here: https://www.magezon.com/magento-2-mega-menu.html