Magento Sidebar Category Navigation

Many Magento store owners still prefer a vertical category menu on the left or right sidebar. A sidebar menu helps shoppers browse categories quickly, especially in stores with large catalogs. In 2025, Magento Open Source and Adobe Commerce continue to support flexible layout updates, custom templates, and dynamic navigation blocks. This updated guide explains how to create a clean, expandable sidebar category menu with images and nested categories.

The Idea Behind a Modern Sidebar Menu

In older Magento versions, developers used Mage:: models directly to fetch categories. But in Magento 2 (2.4+), the recommended approach is to use:

• CategoryRepository
• Navigation block
• Plugins or ViewModels (for data separation)
• Layout XML updates

Using the default Magento\Catalog\Block\Navigation ensures you keep full control over:

• Category visibility
• Include in Menu option
• Store scope
• Active category highlighting

This method is clean, upgrade-friendly, and aligned with Magento coding standards for 2025.

Step 1: Create the Sidebar Menu Template

Create a new template file:
app/design/frontend/<Vendor>/<theme>/Magento_Theme/templates/html/sidemenu.phtml

Add this updated 2025 Magento 2 code:

<?php/** @var\Magento\Catalog\Block\Navigation $block */ $categories= $block->getStoreCategories(); $currentCategoryId= $block->getCurrentCategory() ? $block->getCurrentCategory()->getId() : null; ?><div class="sidebar-menu">    <olclass="menu-level-1">        <?phpforeach($categoriesas$category): ?>            <liclass="menu-item">                <strong><?= $category->getName() ?></strong>                <?php$children= $category->getChildrenCategories(); ?>                <?phpif($children->count()): ?>                    <olclass="menu-level-2">                        <?phpforeach($childrenas$child): ?>                            <liclass="submenu-item">                                <?php                                 $isActive= ($currentCategoryId=== $child->getId());                                $imageUrl= $child->getImageUrl();                                ?>                                                                <?phpif($imageUrl): ?>                                    <divclass="category-thumb">                                        <imgsrc="<?= $imageUrl?>" width="100" height="100" loading="lazy"/>                                    </div>                                <?phpendif; ?>                                <ahref="<?= $child->getUrl() ?>" <?= $isActive? 'style="font-weight:bold"' : '' ?>>                                    <?= $child->getName() ?>                                </a>                            </li>                        <?phpendforeach; ?>                    </ol>                <?phpendif; ?>            </li>        <?phpendforeach; ?>    </ol> </div> 

What’s new in 2025?

• Modern Magento 2 functions (getChildrenCategories())
• Lazy-loaded images
• Cleaner HTML structure
• No deprecated Mage:: classes
• Safe template rendering

Step 2: Add the Menu to the Layout

To display the menu on the left sidebar:

Open:
app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml

Add:

<referenceContainername="sidebar.main">    <blockclass="Magento\Catalog\Block\Navigation"            name="catalog.sidemenu"            template="Magento_Theme::html/sidemenu.phtml"/> </referenceContainer> 

For the right sidebar:

<referenceContainername="sidebar.additional">    <blockclass="Magento\Catalog\Block\Navigation"            name="catalog.sidemenu.right"            template="Magento_Theme::html/sidemenu.phtml"/> </referenceContainer> 

2025 note:

Magento now discourages editing page.xml under base theme. Always override layouts in your custom theme.

Step 3: Adding Expand/Collapse Menu & Hover Images

In 2025, front-end enhancements rely on:

• Vanilla JavaScript (Magento standards)
• Lightweight CSS
• Avoiding heavy jQuery where not needed

Example CSS:

.sidebar-menu.menu-level-2{    display: none;    margin-left: 10px; } .sidebar-menu.menu-item:hover.menu-level-2{    display: block; } 

You can also implement:

• Accordion-style expand/collapse
• Hover thumbnail previews
• Mega-menu style vertical flyouts

These improvements are now commonly done through require.js mixins or pure custom JS in Magento 2.

Final Words (Updated for 2025)

Magento’s category navigation remains flexible enough to build custom vertical menus. By using the navigation block, layout XML, and your own template, you can create a clean and expandable sidebar menu with category images and multi-level hierarchies. With a little CSS and JavaScript, you can also turn this into a full mega-menu or a mobile-friendly tree structure.

This updated 2025 approach keeps your store compatible with the latest Magento architecture and ensures a smoother upgrade path for future releases.