How to Add a Collapsible Side Menu in WordPress?

Introduction 

Do you want to know how to add a collapsible side menu in WordPress? Stick to this blog, as you will get fully charged with the perfect guide.

Your website has much to say and display in front of the customers. But sometimes, you cannot present it in the right way to attract more visitors. We are here to help you out. Adding collapsible side bar is a modern and organized way to showcase your content. This is the most organized way to add a lot of content and links with less space consumed. Your sidebar looks organized and uncluttered when you add collapsible menus to pour more content and links on your site. 

Well, most of them just don’t know what it is or how to add them to the website. Not to worry, we are here to make your doubts cleared in no time. 

What is a Collapsible Side Menu? 

Breaking up the silence, the collapsible side bar is the most user-friendly form of adding a lot of content to a side menu. This menu follows a parent-child relationship; the parent menu is expandable, opening up other side menus in it. 

There can be a lot of links and content sections to be included on your site. But the urge is to make them look organized and consume less space. This is where WordPress allows the concept of adding a collapsible side menu to be placed on the sidebar in WordPress. 

For e-commerce stores or other content-heavy websites, this concept is highly praised for displaying categories and sub-categories. 

Why Do You Need to Add a Collapsible Side Menu to Your Website? 

Collapsible Side menus can also be considered expandable menus that hide a lot of content and links. Your website looks just perfect with organized side menus and sidebar in WordPress poured with a lot of content. Ultimately, the collapsible side bar cut out the complexity of your website. 

So for content-heavy websites or Woocommerce sites, collapsible menus are way more useful to add. 

How to Add a Collapsible Side Menu in WordPress? 

Keeping the above things in mind, let’s add a collapsible menu in WordPress. For this, we are going to use the Bellows Accordion Menu Plugin. What this plugin does is provide you with a handy shortcode that helps in placing a collapsible menu anywhere on the site.

• To start with first, get this “Bellows Accordion Menu” plugin installed and activated on your website. 
• After the plugin is activated, visit the Menus option under the Appearance section of the WordPress dashboard. 
• On the first podium, you need to give a name to the menu in the “Menu Name,"  which is for your reference only. 
• Then tap the “Create Menu” button and choose the pages you want to add to the collapsed side menu. You can see there are recent pages displayed to choose from for your collapsible side menu. To view all the pages, select the “View All” button.
• And if you want to add all pages, hit the “Select All” option. Once you have selected the pages for your collapsible side bar, tap the “Add to Menu” button. Along with the pages, you can even add links, posts, or blog categories to the menu.
• Also, if you want to update the order of the pages, simply use the drag-and-drop facility to make them look like you wish to.
• As you know, the collapsible menu works like the parent-child relationship. When clicking on the parent menu, it eventually expands into various sub-menus content.
• Now, you can simply drag and drop the child menus under the parent menu specifically. And lastly, hit the “Save Changes” button. 

You have created the menu, and now we will add the customizable menu to the WordPress sidebar. For this, we need some automatically created shortcodes using the Bellows Accordion menu plugin.

• Under the Appearance tab of the WordPress dashboard, tap the Bellows menu, and you will reach the page. 
• Here under the Main Configuration tab, you need to select the “Show All” option. 
• Now, tap the Shortcode box, which highlights the overall code. You simply need to copy the code for further use. 
• Head to the Widgets area under the Appearance tab and paste the copied code to it. It will then display all the widget areas that come under your current theme. You need to find the sidebar area and hit the area, and I will expand the section now. 
• After this, you need to add the shortcode block by tapping the “+” icon and placing it on the screen. 
• Next, you need to paste the collapsible menu shortcode in the shortcode block, and finally tap the Update button.

Now, you can see the newly added collapsible sidebar menu on your website. 

Customizing the Newly Added Collapsible Side Menu 

Just like you have added a new collapsible menu, customizing it is also not so crucial. Let’s move ahead to customize the newly added Collapsible menu. You can change the colour of your collapsible menu easily so that your brand reflects uniquely.

For this, simply reach the Bellows menu under the appearance section of the dashboard. The entire menu is filled with various options to tweak the settings of the collapsible side bar. To change the colour scheme of the collapsed menu, tap the Basic Configuration section under the Main Configuration. 

Here, you can easily change the menu colour with the dropdown options. Also, this section allows you to enable the Accordion Folding settings so that users can access multiple sub-menus at once. If you want to change the alignment and the width, you simply need to tap the “Layout and Position” tab. 

You can even enable real-time changes while customizing the collapsible menu using the WordPress customizer. Simply visit the Customizer section under the Appearance tab, and the Bellows tab will help you customize. 

Using a WordPress Theme to Add a Collapsible Side Menu:

When designing a website, user navigation is paramount, and a well-crafted sidebar can make all the difference. For those seeking premium WordPress themes with collapsible side menus, VW Themes is a top-notch provider. Their themes feature both left and right-aligned sidebars, making user navigation seamless and intuitive. This thoughtful design element not only enhances the user experience but also ensures that the website with sidebar functionality is both versatile and aesthetically pleasing. Whether you're building a blog, a business site, or an e-commerce platform, VW Themes' sidebar in WordPress options will cater to your specific needs with ease.

Here's a step-by-step guide to add a sidebar menu using a premium WordPress theme from VW Themes:

1) Download the Theme: Purchase and download your chosen premium theme from VW Themes.

2) Upload the Theme:

• Go to your WordPress dashboard.
• Navigate to Appearance > Themes > Add New.
• Click on Upload Theme and select the downloaded theme file.
• Click Install Now, then Activate.

3) Customize the Sidebar Menu:

• Go to Appearance > Customize.
• Add Widgets to Sidebar: In the Customizer, navigate to Widgets.
• Select the sidebar location where you want to add the menu (e.g., Left Sidebar, Right Sidebar).
• Click Add a Widget and choose the Navigation Menu widget.
• Select the menu you want to display from the dropdown (you can create a new menu if needed).

4) Create The Sidebar Menu:

• Go to Appearance > Menus.
• Click on Create a new menu, give it a name, and click Create Menu.
• Add pages, posts, categories, and custom links to your menu by selecting them from the left side and clicking Add to Menu.
• Arrange the menu items by dragging and dropping them into place.

5) Save and Publish: Once you're satisfied with your sidebar menu setup, click Publish to save your changes.