Do you want to create a collapsible sidebar menu in WordPress?
A collapsible menu can give your website visitors an easy way to access a lot of links, without cluttering up your sidebar. It’s perfect for large websites, eCommerce stores, or any site that has a more complex layout.
In this article, we will show you how to easily create a collapsible sidebar menu in WordPress.
Displaying every single product category in a standard menu wouldn’t be a good idea. Shoppers would likely need to scroll through the menu to find the category they’re interested in.
This is where collapsible menus come in. These menus organize their content in a parent-child relationship. If the visitor clicks on a parent item in a collapsible menu, then it will expand to display all of that parent’s child content.
The Guardian news outlet uses a collapsible menu for its mobile site.
Collapsible menus are sometimes called expandable menus. This is because their different sections expand when a visitor clicks on them.
By default, collapsible menus hide a lot of content and complexity from visitors. This is much more user-friendly than scrolling through a long list of categories and subcategories.
Bellows Accordion Menu provides a handy shortcode so you can place your collapsible menu on any page, post, or widget area, including your sidebar.
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.
Alternatively, you can click on Select All. This will add all of your pages to the collapsible menu.
After adding all of your different webpages to the menu, you can move them around by dragging and dropping them. This will change the order these pages appear in your collapsible menu.
When a visitor clicks a parent item in your collapsible menu, it will expand to reveal all of the child content.
To create this relationship, simply use drag and drop to arrange all of your child pages beneath their parent.
Next, grab each child and drag it a little to the right. You can then release this page. This will indent the item and turn it into a child page.
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 can now click on the Shortcode box, which should highlight all of the code. Now, copy this code using either the Command + c or Ctrl + c keyboard shortcut.
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.
If you want to tweak the default menu, simply go to Appearance » Bellows Menu in your WordPress dashboard.
This menu has all the settings you need to customize your collapsible menu. There are a lot of settings to explore. However, you may want to start by going to Main Configuration » Basic Configuration.
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.
Here, you’ll find lots of different settings for your collapsible sidebar. This includes changing its width, alignment, and the color of your sidebar menu.