Are you looking to create collapsible sidebar navigations in WordPress? This tutorial will show you how to create a collapsible menu in WordPress using the free plugin.
Your website visitors will appreciate the ease of collapsible navigation. It doesn’t take up too much space in your sidebar. This is ideal for eCommerce sites, large websites, and any other site that has a complex layout.
This article will demonstrate how to create a WordPress sidebar menu that collapses.
What is a collapsible sidebar menu? When should you use one?
Most menus are easy to use and give users quick access to all the necessary links. Sites with many pages or complex layouts may find it difficult to do this.
Imagine a large eCommerce site with many product categories and subcategories.
It is not a good idea to display each product on a single menu. Buyers might have to scroll through several menus to find the product they are looking for.
These are the advantages of collapsible meals. These menus arrange their content according to a parent-child relationship. Clicking on a parent item within a collapsed menu will open it to show all the child content for that parent.
Also Read: Professional University WordPress Theme To Create Online Education Platform
For its mobile site, the Guardian news outlet uses a simplified menu. Expandable menus are collapsible menus because their sections expand as visitors click on them.
Collapsible menus hide complex content and information from visitors by default. This is easier than scrolling through a long list of subcategories and categories.
Let’s now see how to create a collapsed sidebar on your WordPress website.
How to create a collapsible sidebar menu in WordPress
With the Bellows Accordion Menu plugin, you can create a sidebar menu in WordPress. Bellows Accordion menu provides a shortcode to place your collapsed list on any page, post, or widget area. This includes your sidebar.
1. A collapsible sidebar menu in WordPress
First, install the plugin and then activate it. For help, refer to our guide to installing a WordPress plugin.
After activating, navigate to the Appearance >> menu page from your WordPress dashboard.
2. Creating a Menu in the WordPress Dashboard
In the “Menu NameAdding Pages to Your WordPress Menu” field, enter a name for your menu. The name will not be visible to site visitors as it is only for your reference. You can then click on the Create Menu button.
Next, select the pages you wish to add to your collapsible navigation. WordPress displays only your most recent pages by default. Click the View All tab to view a complete list of pages on your site.
3. Adding Pages to Your WordPress Menu
You can also click on Select All. This will convert all pages into a collapsible list.
After you’re satisfied with your selection, click the “Add to Menu” button. You can also choose posts or blog categories and add custom links. You can find more information in our guide to adding a navigation menu to WordPress.
Drag-and-drop is a great way to move web pages around after adding them all to the menu. This will alter the order these pages appear on your collapse menu.
Collapse menus focus on the parent-child relationship. Clicking on a parent item within your collapsible menu will reveal all the child content.
Also Read: How to Make Local Business Benefited from Social Influencer Marketing?
Drag and drop is all you need to make this connection.
Next, take each child in your arms and gently pull them to the right. This will allow you to release the page. This will insert the item and make it a child page.
4. Adding Posts to WordPress Menu
Don’t forget to click the Save Changes button when you’re done.
We now want to add the collapsible sidebar menu. We will use shortcodes that Bellows Accordion automatically creates to accomplish this.
Go to Appearance >> Menu to grab the shortcode. If the Show All tab isn’t selected, make sure it is.
Click on the Shortcodes Box to highlight all codes. Copy this code by pressing Command + c or Ctrl+ c keyboard shortcut.
Next, paste the shortcode into a widget. Go to Appearance >> Widgets. This will display all widgetized areas in your current theme. Although the options may differ, most WordPress themes include a sidebar.
5. Configuring collapsible sidebar menus
Click on the sidebar to expand it. This will expand the section.
Click on the + icon to add a block. Start typing shortcodes. Select Shortcode Block when it appears.
6. How to Add Widgets to WordPress Sidebar
Paste the shortcode for your minimize able Menu into this block. Click the Update button at the top of the screen to publish your Menu.
You should now see a new collapsible sidebar navigation menu when visiting your website.
This default menu can be customized with the Bellows Accordion plugin. To better reflect your brand, you can modify the color scheme on your site.
Also Read: Top 10 Blogging Tips for College Students
You can change the default menu by going to Appearance >> bellows Menu in your WordPress dashboard.
This Menu contains all the settings that you will need to personalize your collapsible meal. There are many settings that you can explore. You may find it helpful to begin by visiting Main Configuration >> Basis Configuration.
7. Configuring the look and feel of your WordPress collapsible sidebar menu
You can choose from a variety of menu colors. You can also decide whether multiple submenus can be expanded simultaneously using the accordion folding settings.
Click on the tab ‘Layout and position’ to change the width and alignment of the menu.
8. Placing collapsible menus on a WordPress website
You can preview your changes instantly by editing the collapsible sidebar navigation in WordPress Customizer. To do so, go to Appearance >> Customize.
Select Bellows in the left-hand menu.
Conclusion
You’ll find many options for setting up your collapsible sidebar. You can adjust its width, alignment, or color. We hope you found this article helpful in creating a simple sidebar menu in WordPress.
Interesting Reads:
Must-Know The Essential And Successful Blogging Skills
What is the Pillar Page? And SEO Strategy Benefits of Using Theme
