Do you want to make a WordPress collapsible sidebar menu?
A collapsible menu allows visitors to quickly access a large number of links without cluttering your sidebar. It’s ideal for huge websites, eCommerce businesses, and any other site with a more complicated design.
We’ll teach you how to make a collapsible sidebar menu in WordPress in this article.
What is a Collapsible sidebar menu (And When to Use One)
The most user-friendly menus allow visitors to quickly access all of the links they require. However, for sites with a lot of pages or a more complicated structure, this can be difficult.
Consider Amazon, a huge eCommerce business with a significant number of product categories and subcategories.
It’s not a smart idea to put every single product category on a standard menu. Shoppers will almost certainly have to navigate through the menu to discover the category they’re looking for.
Collapsible menus are useful in this situation. The content of these menus is organised in a parent-child relationship. When a visitor clicks on a parent item in a collapsible menu, it expands to show all of the child material for that parent.
For its mobile site, the Guardian employs a collapsible menu.
Expandable menus are another name for collapsible menus. This is due to the fact that when a visitor clicks on one of their parts, it expands.
Collapsible menus, by default, hide a lot of material and complexity from visitors. Rather of browsing through a huge list of categories and subcategories, this is considerably more user-friendly.
With that in mind, let’s look at how to make a collapsible sidebar menu on your WordPress site.
How to Create a Collapsible Sidebar Menu in WordPress
Bellows Accordion Menu provides a handy shortcode so you can place your collapsible menu on any page, post, or widget area, including your sidebar.
First, you’ll need to install and activate the plugin. If you need help, then please see our guide
Upon activation, go to the Appearance » Menus page in your WordPress dashboard.
To start, type a name for your menu into the ‘Menu Name’ field. Your site visitors won’t see the name since it’s for your own reference only. You can then click on the Create Menu button.
Next, you can choose the pages you want to add to the collapsible menu. By default, WordPress displays your most recent pages only. If you want to see a list of all your website’s pages, then click on the View All tab.
Expandable menus are another name for collapsible menus. This is due to the fact that when a visitor clicks on one of their parts, it expands.
Collapsible menus, by default, hide a lot of material and complexity from visitors. Rather of browsing through a huge list of categories and subcategories, this is considerably more user-friendly.
With that in mind, let’s look at how to make a collapsible sidebar menu on your WordPress site.
When a visitor hovers their mouse on a parent item in your collapsible menu, it expands to expose all of the child content.
Simply drag and drop all of your kid pages beneath their parent page to form this relationship.
Next, grab each child and move it to the right a little. After that, you may publish this page. The item will be indented and turned into a child page as a result of this.
Don’t forget to click the Save Changes button when you’re finished.
Now we want to add this collapsible menu to the WordPress sidebar. To do this, we’ll use some shortcode that Bellows Accordion creates automatically.
To grab the shortcode, go to Appearance » Bellows Menu. If it isn’t already selected, then make sure you select the Show All tab.
You may now choose the Shortcode box, which will highlight the entire code. Now, use the Command + c or Ctrl + c keyboard shortcuts to copy this code.
The following step is to paste this shortcode into a widget, so go to Appearance » Widgets. This will show you all of your current theme’s widgetized regions. Although the settings may differ, most current WordPress themes have a sidebar.
Once you’ve found the sidebar area, give it a click. This section will now expand.
To add a block, click on the + icon and start typing Shortcode. When it appears, select the Shortcode block.
Now, simply paste your collapsible menu shortcode into this block. To publish your menu, you’ll need to click on the Update button at the top of your screen.
Now, when you visit your site you should see a new collapsible sidebar menu.
The Bellows Accordion plugin makes customising the default menu a breeze. You may, for example, alter the colour palette to better fit the branding of your website.
Simply go to Appearance » Bellows Menu in your WordPress dashboard to change the default menu.
This menu contains all of the options for customising your collapsible menu. There are several settings to discover. You might wish to start by navigating to Main Configuration » Basic Configuration first.
Here, you can switch between several different menu colors. You can also choose whether visitors can expand multiple submenus at once using the Accordion Folding settings.
To change the menu’s alignment and width, click on the ‘Layout & Position’ tab.
If you’d prefer to preview your changes in real time, then you can edit the collapsible sidebar menu in the WordPress Customizer. To do this, head over to Appearance » Customize.
In the left-hand bar, select Bellows.
You’ll discover a variety of options for configuring your collapsible sidebar here. The width, placement, and colour of your sidebar menu may all be changed.
We hope you found this post useful in learning how to make a collapsible sidebar menu in WordPress. You may also read our guides on how to track visits to your website and the best push notification software to increase traffic.
