wpbean

MD Imran Khan

Vertical menu block is a powerful and flexible Gutenberg block plugin that allows you to create fully customizable vertical accordion menus for your WordPress website. Built specifically for the WordPress block editor, this vertical menu block is ideal for sidebars, navigation panels, and widget areas, helping you organize complex navigation structures in a clean and user-friendly way.
Using collapsible vertical sidebar menus improves overall site usability by allowing visitors to expand and collapse submenus only when needed. This approach saves valuable screen space, keeps layouts visually clean, and enhances readability—especially on mobile and tablet devices.
Designed with performance, accessibility, and flexibility in mind, the vertical menu block works seamlessly with the native Gutenberg editor and is compatible with all modern WordPress themes. Whether you’re building a blog, portfolio, business website, or WooCommerce store, this vertical menu block helps you deliver a professional, responsive, and accessible navigation experience across all devices.
<h3>Quick Links</h3>
👉 Upgrade to Pro: <a href="https://wpbean.com/downloads/vertical-sidebar-menu-block-pro/?utm_content=Vertical+Sidebar+Menu+Block&utm_campaign=repository&utm_medium=desc-link&utm_source=WordPress" rel="nofollow ugc">Explore all Features of Vertical Sidebar Menu Block</a> 
👉 Live Demo with Menu: <a href="https://elementorkit.wpbean.com/wordpress-vertical-sidebar-menu-block/" rel="nofollow ugc">Try Vertical Sidebar Menu Block Demo</a> 
👉 Live Demo with Product Categories: <a href="https://elementorkit.wpbean.com/shop/" rel="nofollow ugc">Try Vertical Sidebar Menu Block Demo</a> 
👉 Support: <a href="https://wpbean.com/support/" rel="nofollow ugc">Support</a>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/oULtCW99xqs?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h3>Key Features</h3>
<ul>
<li>Select Any Navigation Menu: Easily choose and display any existing WordPress navigation menu.</li>
<li>Menu Depth Control: Define how many submenu levels to display for better structure and usability.</li>
<li>Accordion-Style Navigation: Submenus expand and collapse smoothly for a clean, organized look.</li>
<li>Auto-Expand Current Menu Item: Automatically expands the menu to reveal the current page for improved navigation clarity.</li>
<li>Persistent Expanded State: Keeps menu items expanded after page reloads, providing a consistent browsing experience.</li>
<li>Advanced Typography Options: Customize font family, size, and style separately for parent and child menu items.</li>
<li>Flexible Styling Controls: Adjust colors, backgrounds, spacing, and hover effects for parent, child, and active menu items.</li>
<li>Theme Compatibility: Works seamlessly with any modern WordPress theme and fully supports the Gutenberg block editor.</li>
<li>Dedicated Support: Receive expert assistance from a responsive support team whenever you need help.</li>
</ul>
<h3>Source Code and Development</h3>
This plugin uses wp-scripts which comes with modern build tools like Webpack and npm to generate production-ready files. The uncompressed source code is included in the plugin’s <code>src/</code> directory for transparency and review. Developers can access the source code directly or contribute via the GitHub repository.
To build the plugin from source:
<ol>
<li>Install Node.js and npm.</li>
<li>Run <code>npm install</code> to install dependencies.</li>
<li>Use <code>npm run build</code> to compile the assets.</li>
</ol>
For more details, see the documentation in the WordPress developer resources: 
<a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/" rel="nofollow ugc">WordPress Developer Resources – Get started with wp-scripts</a>
For details, see the documentation in the GitHub repository: 
<a href="https://github.com/wpbean/Vertical-Sidebar-Menu-Block" rel="nofollow ugc">GitHub – Vertical Sidebar Menu Block</a>
<h3>Credits</h3>
This plugin includes a modified version of the <a href="https://github.com/tefra/navgoco" rel="nofollow ugc">Navgoco jQuery plugin</a> by Tefra, which is licensed under the BSD-3-Clause License. Original library copyright © Tefra. The modified version complies with the BSD-3-Clause License.

Vertical Menu Block for Sidebar Accordion Menu

Create responsive vertical accordion menus using a customizable Gutenberg block. Perfect for sidebars and navigation panels.

An accordion menu (also called sidebar menu) can be a really useful feature for your WordPress site. It lets you show more content without needing endless scrolling in a collapsible menu.
If you’re looking for a WordPress accordion menu, accordion categories, or off-canvas WordPress menu for your website, you’ve come to the right place. That’s exactly what the WPB Accordion Menu is built for.
This accordion menu plugin is a powerful solution for WordPress and WooCommerce websites. It delivers a clean, responsive sidebar accordion menu that helps organize content in a structured and user-friendly way. Designed for sites with complex navigation, multiple menus, or a large number of categories and subcategories, this accordion menu improves usability while maintaining a modern, lightweight design.
<h3>Quick Links</h3>
<a href="https://accordion.wpbean.com/" rel="nofollow ugc">Live Demo</a> | <a href="https://docs.wpbean.com/docs/wpb-accordion-menu-or-category-pro-new-version/installing/" rel="nofollow ugc">Documentation</a> | <a href="https://wpbean.com/downloads/wpb-accordion-menu-category-pro/?utm_content=WPB+Accordion+Menu+Pro&utm_campaign=repository&utm_medium=desc-link&utm_source=WordPress" rel="nofollow ugc">Upgrade to Pro!</a>
<h3>🚀 Trusted by 10,000+ WordPress Websites</h3>
WPB Accordion Menu is actively used on 10,000+ WordPress websites, delivering a fast, lightweight, and highly flexible solution for creating accordion menus.
<h3>Pro Version Video Documentation:</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/BIGa3PKhPuU?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h3>What are the Benefits of Using the WPB Accordion Menu plugin?</h3>
One of the primary benefits of WPB Accordion Menu is its ability to create a clean, organized, and user-friendly WordPress sidebar menu that collapses and expands smoothly. It allows users to quickly and easily find what they are looking for. Thus, they won’t be overwhelmed by too much information at once. The result is a more pleasant browsing experience. This will eventually lead to higher engagement and increased time spent on the site.
Another significant advantage of the WPB Accordion Menu is its high customization features. You can easily change the appearance of the accordion menu to perfectly match your website’s branding. You won’t need to write a single line of code and easily customize colors, fonts, and icons in live view.
WPB Accordion Menu also offers benefits for WooCommerce users. This WordPress accordion menu plugin supports the dynamic display of product categories. This is highly useful for WooCommerce stores with large inventories.
This WordPress accordion menu plugin has friendly and supportive customer support. The support team is always here to help if you come across any difficulties while customizing a sidebar menu or off-canvas menu, or have any questions in mind.
<h3>Why is WPB Accordion Menu a Must-Have Accordion Menu plugin?</h3>
⭐️ User-Friendly Experience:
The WPB Accordion Menu enhances the way users interact with your WordPress website. The WordPress accordion menu plugin makes navigating through categories and subcategories easy by using a collapsible menu.
The accordion category makes it easy to choose the right category in seconds. This is crucial for e-commerce websites where users can navigate easily between subcategories using the category accordion. A menu accordion can make a huge difference between a sale and an abandoned cart.
⭐️ Responsive Across Devices:
WPB Accordion menu is responsive across all types of devices. Nowadays, people browse on everything from desktops to smartphones, and that’s why having a responsive sidebar menu or collapsible menu in WordPress is essential.
With the help of this accordion menu plugin, you can easily create the following WordPress responsive menus:
<ul>
<li>Divi accordion menu.</li>
<li>Off canvas WordPress menu.</li>
<li>WordPress hamburger menu.</li>
<li>WordPress sidebar menu.</li>
<li>WordPress vertical menu.</li>
<li>Elementor accordion menu.</li>
<li>WooCommerce sidebar menu.</li>
<li>WooCommerce accordion category menu.</li>
<li>WooCommerce collapsible categories list and many more!</li>
</ul>
⭐️ WooCommerce Category Menu
WooCommerce category menu is a powerful feature of the WPB Accordion Menu. This is designed to enhance the navigation of WooCommerce stores by organizing product categories.
Instead of displaying an overwhelming list of categories and subcategories, you can use this feature to present a clean, collapsible menu. This not only improves the overall user experience by making it easier for customers to find products
WooCommerce category menu by WPB Accordion Menu can lead to higher engagement and increased sales by simplifying navigation. Because customers are less likely to abandon their search out of frustration.
⭐️ WooCommerce sidebar menu
WooCommerce sidebar menu by WPB Accordion Menu can also optimize the navigation experience for WooCommerce stores. This feature transforms the sidebar into an organized, user-friendly sidebar menu.
Here, the product categories are neatly displayed in expandable and collapsible sections. WooCommerce sidebar menu prevents the sidebar from becoming cluttered. This enhances the usability and functionality of the site.
⭐️ Elementor accordion menu
The Elementor accordion menu by WPB Accordion Menu smoothly integrates with the Elementor page-building experience. This addon allows users to create collapsible menus directly on the Elementor page builder.
<h3>Free version Features of WPB Accordion Menu</h3>
<ul>
<li>
Display any custom taxonomies as an accordion 
Easily display custom taxonomies in a neat, collapsible menu. This makes it easier for your users to navigate through complex data structures.
</li>
<li>
Convert any navigation menu into an accordion menu 
Transform standard navigation menus into organized, collapsible sections. This enhances user experience by reducing visual clutter.
</li>
<li>
Organize hierarchical posts with an off-canvas layout or sidebar menu 
Present hierarchical posts in a clean, accordion-style layout. This allows your users to drill down into content without overwhelming them.
</li>
<li>
Experience the ultimate sidebar accordion menu 
This plugin offers the easiest and most customizable solution for sidebar navigation. It integrates seamlessly to provide a user-friendly, collapsible menu.
</li>
<li>
Create a collapsible sidebar menu with ease 
Design a sidebar menu that users can expand and collapse at will. This feature optimizes space and improves site aesthetics.
</li>
<li>
Design a vertical menu effortlessly 
Easily develop vertical menus that align with your site’s layout. This is ideal for creating eye-catching and accessible navigation menus.
</li>
<li>
Build a responsive menu that adapts to any device 
Build collapsible menus that adjust smoothly across all device sizes. This ensures a consistent user experience on desktops, tablets, and smartphones.
</li>
<li>
Develop a WooCommerce category menu in accordion style 
Develop a WooCommerce category menu that your users can easily collapse and expand. This simplifies product navigation and enhances shopping efficiency.
</li>
<li>
Display a WooCommerce menu using product categories 
Display WooCommerce product categories in a user-friendly accordion format. This helps customers find products quickly and easily.
</li>
<li>
Ideal for creating a collapsible WordPress sidebar menu 
This tool is ideal for creating collapsible menus in WordPress sidebars. It helps maintain a clean and organized interface.
</li>
<li>
Quickly create a vertical menu in WordPress 
Quickly set up vertical menus within your WordPress website. This streamlines navigation and improves the overall user experience.
</li>
<li>
Showcase the Elementor accordion menu 
Integrate accordion menus seamlessly into Elementor layouts. This enhances content organization and accessibility using the most popular WordPress page builder.
</li>
<li>
Compatible with WooCommerce and other eCommerce plugins 
This plugin works well with WooCommerce and other eCommerce solutions. It provides flexible and robust menu options for online stores.
</li>
<li>
Support for implementing multiple accordion menus 
Easily implement multiple accordion menus on a single site. This allows for diverse content organization strategies.
</li>
<li>
Use its ShortCode anywhere: widget area, page, post, Gutenberg, Elementor, Divi 
Utilize this WordPress sidebar menu plugin’s shortcode in various areas of your site. This includes widgets, pages, posts, and popular builders like Gutenberg, Elementor, and Divi.
</li>
<li>
A fully responsive menu perfect for mobile use 
Design sidebar menus and off-canvas menus that are fully responsive and mobile-friendly. This ensures optimal navigation on smartphones and tablets.
</li>
<li>
Includes an advanced accordion builder 
The plugin features a powerful accordion builder for creating custom menus. This WordPress sidebar menu plugin provides extensive design and functionality options.
</li>
<li>
Offers two distinct skins for different styles 
Choose from two distinct skins of the WordPress accordion menu to match your site’s aesthetic. This allows for greater customization and visual appeal.
</li>
<li>
Enhanced Keyboard Accessibility 
Easily navigate the accordion menu using Tab and Arrow keys, ensuring a smoother and more accessible experience for all users, including those relying on keyboards.
</li>
<li>
A Gutenberg block is included 
Easily add accordion menus and navigation menus using the Gutenberg block by WPB Accordion Menu. This simplifies the process of integrating accordions into your content.
</li>
<li>
A classic widget is included 
Use the classic widget by WPB Accordion Menu to place sidebar menus and off-canvas menus in your WordPress sidebar. This makes it easy to enhance navigation with minimal effort.
</li>
</ul>
<h3>⚡️⚡️⚡️ Premium Features of WPB Accordion Menu</h3>
<ul>
<li>
Displaying custom taxonomies or menus as accordions 
Custom taxonomies and menus can be shown in an organized, collapsible accordion menu. This enhances the navigation menu by allowing users to expand only the sections they need.
</li>
<li>
Presenting the accordion menu alongside the Hamburger menu 
The accordion menu can be integrated with the hamburger menu for a user-friendly navigation experience. This combination ensures that both menus are accessible and space-efficient.
</li>
<li>
Revealing the accordion menu within the off-canvas sidebar menu 
When utilized within an off-canvas sidebar menu, the accordion menu remains hidden until the sidebar is activated. This also provides a clean and uncluttered main interface.
</li>
<li>
Offering five distinct predefined skins for accordion menus 
You can choose from five unique predefined skins of the sidebar menu to match your website’s appearance. Each skin is designed to provide a different visual style, ensuring flexibility in design preferences.
</li>
<li>
Customization options for color, typography, and spacing in the settings 
Extensive customization options are available for advanced users. You can easily tweak colors, typography, and spacing to perfectly align with your brand identity.
</li>
<li>
Utilizing the advanced accordion shortcode builder 
The advanced accordion shortcode builder simplifies the process of creating and embedding accordion menus. This tool allows users to generate custom sidebar menus with specific functionalities quickly.
</li>
<li>
Providing an Elementor widget, Gutenberg block, regular widget, and shortcode for displaying accordions 
Multiple integration options are available, including an Elementor widget, Gutenberg block, regular widget, and shortcode. These options ensure WPB Accordion Menu compatibility with various page builders and website setups.
</li>
<li>
Supporting WooCommerce product categories and tags 
The accordion menu feature extends to WooCommerce. This allows product categories and tags to be displayed in a collapsible menu. This functionality enhances the shopping experience by making it easier to navigate product categories.
</li>
<li>
Displaying posts/custom post types within the category accordion menu as child items 
Posts and custom post types can be organized within the accordion menu as child items under their respective categories. This hierarchical display improves content organization and accessibility.
</li>
<li>
Automatically opening the first-level parent category or menu 
The first-level parent category menu item can be set to open automatically. This streamlines the user navigation by highlighting primary sections upon page load. This feature aids in guiding users to key content areas more efficiently.
</li>
<li>
Featuring the ability to keep selected menu items expanded in the accordion 
Selected sidebar menu and off-canvas menu items can remain expanded within the accordion. This provides persistent visibility for important sections. Also, this functionality is useful for highlighting and maintaining access to frequently used items.
</li>
<li>
Enabling the option to keep the current menu or category accordion open 
The option to keep the current menu or category accordion menu open enhances user experience by allowing continuity in navigation. Your website users can maintain their place within the navigation structure without repeatedly collapsing and expanding.
</li>
<li>
Accessing a custom icon picker for menus and categories 
A custom icon picker is available for adding unique icons to accordion menus and categories. This enhances visual differentiation and user engagement. This tool allows for a more personalized and visually appealing menu design.
</li>
<li>
Uploading PNG icons for categories 
You can upload custom PNG icons for categories. This provides a more customized and visually distinct navigation experience. This feature supports branding efforts by incorporating unique graphical elements.
</li>
<li>
Including FontAwesome and Themify icons 
The inclusion of FontAwesome and Themify icon libraries offers a wide range of icons to choose from. It comes with visual options for enhancing sidebar menus and accordion categories. This integration simplifies the process of finding the perfect icon for any section.
</li>
</ul>
<h3>Tested with the following themes:</h3>
<ul>
<li>Astra</li>
<li>Ocean WP</li>
<li>Hestia</li>
<li>StudioPress</li>
<li>Hello Elementor</li>
<li>Divi</li>
<li>Storefront</li>
<li>Flatsome</li>
<li>Avada</li>
<li>GeneratePress</li>
<li>Blocksy</li>
<li>Hestia</li>
<li>Tove</li>
<li>Raft</li>
<li>Neve FSE</li>
</ul>
<h3>Tested with the Following page builders:</h3>
<ul>
<li>Gutenberg</li>
<li>Elementor & Elementor Pro</li>
<li>Divi</li>
<li>WPBakery</li>
<li>Visual Composer</li>
<li>Beaver Builder</li>
<li>Bricks Builder</li>
<li>Oxygen</li>
<li>GeneratePress</li>
</ul>

WPB Accordion Menu – Collapsible Vertical Sidebar Menu – WooCommerce Category Accordion

Collapsible accordion sidebar menu for WordPress. Display WooCommerce product categories and navigation menus with ease.

Vertical Menu Block for Sidebar Accordion Menu vs WPB Accordion Menu – Collapsible Vertical Sidebar Menu – WooCommerce Category Accordion