I'm having some issues re-ordering elements within following file:


I'm trying to move the layered navigation below the product toolbar, above the products grid.

I've tried, the following:

<move element="sidebar.main" destination="category.products.list" after="product_list_toolbar"/>

   <move element="catalog.navigation.renderer" destination="category.products.list" after="product_list_toolbar"/>
    <move element="catalog.leftnav" destination="category.products.list" after="product_list_toolbar"/>
    move element="catalog.navigation.state" destination="category.products.list" after="product_list_toolbar" />

This removes the filter entirely, instead of moving it.

Am I correct to try and move this element within the theme catalog_category_view.xml? Or should this be moved with a custom Layered Navigation module ?

An update on this, i was able to move the layered nav to the top of the page via

 <move element="catalog.leftnav" destination="content" before="category.products"/>

if i set the destination to any more deeply nested blocks the nav just disappears.

I've also tried to move the product toolbar around the layered nav, like so

    <move element="product_list_toolbar" destination="content" before="-"/>

The nav is still appearing above the toolbar though.

  • 4th move element does not start properly move element="catalog.navigation.state"
    – Amit Bera
    Commented Jun 9, 2016 at 10:38
  • That was just a copy and paste error, i'm still not able to see the filter. Thanks Commented Jun 9, 2016 at 11:30

6 Answers 6


The solution i came up with is as follows:

<move element="catalog.leftnav" destination="category.product.list.additional" before="-"/>
  • I am trying to do something very similar, moving LayeredNavigation above the toolbar. I have tried this with no luck. <move element="catalog.leftnav" destination="content" before="-"/> <move element="catalog.leftnav" destination="category.products" before="-"/> <move element="catalog.leftnav" destination="category.products.list" before="-"/> <move element="catalog.leftnav" destination="category.view.container" before="-"/> None of this worked although you above solution worked(which bring the layered navigation below toolbar). what am i doing wrong Commented Aug 5, 2016 at 5:34
  • 1
    It worked on category page, but did not worked on search page. Commented Aug 5, 2016 at 6:13
  • 1
    @Arun, idk why no, but for me works perfectly :) Just add this line from comment in your theme in catalog_category_view_type_layered.xml Commented Oct 18, 2016 at 10:44
  • 1
    @ArunKarnawat, to make this work in search page, you need to use <move element="catalogsearch.leftnav" destination="content">, by using catalogsearch.leftnav instead of catalog.leftnav.
    – fudu
    Commented Dec 30, 2019 at 3:23

This is answer to show to move Layered navigation above product toolbar using layout xml. Create a file in your theme in Magento_LayeredNavigation module catalog_category_view_type_layered.xml as below -

    <referenceContainer name="content">
        <container name="catalog-leftnav-top" as="catalog-leftnav-top" htmlTag="div" htmlClass="catalog-leftnav-top" before="category.products"/>
    <move element="catalog.leftnav" destination="catalog-leftnav-top" before = "-"/>

I tried all the options above and none of them worked for putting the layered nav above the toolbar. What finally worked for me was to add code in:


The code:

<move element="catalog.leftnav" destination="content.top" />

Finally the short answer, for those who are struggling with this confusing answers like me:





and add the line <move element="catalog.leftnav" destination="category.product.list.additional" before="-"/> inside this file right under the <body> - tag

<move element="catalog.leftnav" destination="category.product.list.additional" before="-"/>
    <referenceContainer name="columns.top">
        <container name="category.view.container" htmlTag="div" htmlClass="category-view" after="-">
            <block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/image.phtml"/>
            <block class="Magento\Catalog\Block\Category\View" name="category.description" template="Magento_Catalog::category/description.phtml"/>
            <block class="Magento\Catalog\Block\Category\View" name="category.cms" template="Magento_Catalog::category/cms.phtml"/>

If you use 3-column-view and you don´t have another widgets/content in the sidebar.main it could be possible, that the sidebar and 3-column-view disappears because there is no other content and magento removes empty columns/div etc.


The solution i came up with is as follows:


<move element="sidebar.main" destination="content" after="-"/>

To moving the navigation state/leftnav under the toolbar.

  1. Page category
  • Override the layout catalog_category_view.xml in your theme path and add
<container name="category.product.list.additional" as="additional" />

inside of block name="category.products.list"

  • Move catalog.navigation.state or catalog.leftnav by this way to category.product.list.additional in the same layout.
<move element="catalog.navigation.state" destination="category.product.list.additional" />
  1. Page categorySearch
  • Override the layout catalogsearch_result_index.xml in your theme path add
<block class="Amasty\Shopby\Block\Navigation\State" name="catalogsearch.navigation.state.search" as="state_search" />

inside of block name="category.products.list"

  • update template of the block with name category.products.list (Magento_Catalog::product/list.phtml) and add this code <?= /* @noEscape */ $block->getChildHtml('state_search') ?> under <?= $block->getToolbarHtml() ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.