How to Create a Collapsible Sidebar Menu in WordPress

Nowadays, many WordPress website owners decide to create a collapsible sidebar menu. And if you’re running a huge website or perhaps an eCommerce store, this could be an ideal solution for you. To help you set up this feature on your website, we’ve consulted a team of WordPress experts and prepared a thorough guide further in this article. But first, we’ll explain what a collapsible sidebar menu is and why should you have it on your website.

What is a collapsible sidebar menu in WordPress and when should you create it?

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 layout, this can be quite difficult.

Person holding a coffee mug in their left hand and using their right hand to browse through a WordPress website with a collapsible sidebar menu
If you create a collapsible sidebar menu on your WordPress website, you’ll make it more user-friendly.

Just imagine Amazon or eBay which are huge eCommerce businesses with a significant number of product categories and subcategories. When you think about it – it wouldn’t be such a good idea to put every single product category on a common menu. You would need to scroll for a while to find the category you’re looking for.

This is a perfect example of when collapsible sidebar menus come in handy. They allow you to organize the content in a parent-child relationship so when your customer clicks on a parent link, it will expand to show all of the subcategories or children.

Keep in mind that collapsible sidebar menus are also called expandable menus. In case you run into this term, it’s useful to know it represents the same thing. The name is obviously related to the fact that when one of your visitors clicks on one of the sections on your website, the menu expands.

Collapsible sidebar menus help you make your website more user-friendly because they hide a lot of content and complexity from visitors. You’ll help them avoid browsing through a huge list of categories and subcategories and the increasing number of visitors on your website will show how much they appreciate this.

Besides providing you with expert care for your website, we also like to share our knowledge and experience. So here’s how to quickly and easily create a collapsible sidebar menu in WordPress.

The simplest way to create a collapsible sidebar menu in WordPress

The easiest and quickest way to add a collapsible sidebar menu to your website is to use the Bellows Accordion Menu plugin. This plugin allows you to add a collapsible sidebar menu to any page, post, or widget location, including your sidebar.

Left right corner of a laptop with WordPress dashboard and plugins opened on it
Bellows Accordion Menu plugin allows you to quickly and easily create a collapsible sidebar menu in WordPress.

The first step is, of course, installing and activating the plugin. To begin creating your collapsible sidebar menu, go to “Appearance” and click on the “Menus” page in your WordPress dashboard once it’s been activated.

Then, fill in the “Menu Name” section. Keep in mind that this is solely for your use and your visits won’t be able to see it. This means that you can choose any name you want, you don’t have to connect it to any category. After you’re done, simply click on the “Create Menu” button.

The next step is to choose pages you want to include in your collapsible sidebar menu. By default, WordPress only displays your most recent pages however, if you click on the “View All” option, you’ll see all of your posts. Or, you can use the “Select All” button, too, and automatically populate the collapsible menu with all of your pages.

Once you decide which pages to add, click on the “Add to Menu” option. You’ll even be able to add custom links or pick specific topics or blog categories. You can read more about that in our article about adding a navigation menu in WordPress.

After adding pages to the menu, you can move them around and switch their order by simply dragging and dropping them.

Parent-child relationships in collapsible sidebar menus

The focus of collapsible menus is on parent-child connections. Whenever your visitor would hover their mouse over a parent category in your menu, it will expand and give them the option to choose one of the child categories,

Adding child pages is as simple as dragging and dropping them beneath their parent page to create this relationship.┬áNow, you’ll want to add that collapsible menu to your WordPress sidebar. To do this, you’ll have to use a shortcode that the Bellows Accordion Menu plugin will generate for you.

Go to “Appearance” then click on “Bellows Menu” and you’ll get your shortcode but make sure the “Show All” tab is selected. Now, you can select the Shortcode box which will highlight the entire code. Copy the code as you’ll need to paste it into a widget. Go to “Appearances” then “Widgets” and look for the sidebar option.

Once you’ve discovered the sidebar area, click on it as it will expand. You’ll be able to add blocks but you’ll want to find the Shortcode one. Once you’ve found it, simply paste the code you’ve copied and click on the “Update” icon. You’ve successfully added your collapsible menu to your website.

Woman in a white blouse sitting on a couch, holding a credit card, and doing her online shopping
Adding a collapsible sidebar menu in WordPress will help you attract and keep customers.

One of the best things about this plugin is that it allows you to easily customize the default menu. You can choose different colours and play with the design until you create something that fits your website. Simply go to “Appearances” then click on “Customize” and you can start.

The bottom line

We hope our guide helped you learn why and how to create a collapsible sidebar menu in WordPress. As you can see, it’s a pretty straightforward and easy process so even if you are a beginner, you shouldn’t have issues with it. Or simply reach out to the WP Full Care team, get a free consultation, and decide to give your website the expert care it deserves.

 

404 errorabove the foldadvanced cssAIDA modelakismet pluginbacklinks auditbehavior patternbounce ratebrowser compatibilitybulk deletecaching pluginscall-to-actionchild themecode snippetcolor schemecomment sectioncompetitors' backlinkscontact formconversion ratecreate child themeCTA buttoncustom themedead linksdefault configurationdomain authorityeasy manageedit main pageediting toolsemail marketingengaging contentfilter spamfolder structurefree pluginsfriendly tonegoogle rankingsguest postingHow toimage optimizationincrease readabilityindex errorsinfluencer marketingkeyword researchlibrary assistantlink managementlink trackingloading speedlocal businesseslong-tail keywordsmedia replacemedia restrictionmobile optimizationmoney onlinemysql queryonline presenceonline validatorpage builderpage creationproducts and servicesquality imagesquality serviceredirect chainsresponsive designschema markupsearch rankingsearch termsSEO for bloggersSEO optimizationSEO professionalsSEO tipsSEO toolsshort linkssocial mediassh commandsstatic pagetargeted audiencetechnical performancetest metrictext formattheme setting uptime utilizationtraffic increaseunique visitorsuser accessuser experiencevisual designvisual elementsvisual reportweb crawlersweb hostingwebsite auditwebsite designwebsite elementswebsite maintenancewebsite optimizationWebsite problemswebsite securitywebsite structurewhite spacewordpressWordPress functionalityWordPress pluginWordPress pluginswordpress securitywordpress themewordpress theme editWordPress tips and tricksWordPress web hostingwp security

Newsletter