Do you want to make a collapsible sidebar menu in WordPress?
A collapsible menu can give your website visitors a simple thanks to access plenty of links, without cluttering up your sidebar. It’s perfect for giant websites, eCommerce stores, or any site that incorporates a more complex layout.
In this article, we'll show you ways to simply create a collapsible sidebar menu in WordPress.
How to Create a Collapsible Sidebar Menu in WordPress (The Easy Way)
What is a Collapsible Sidebar Menu (And When to Use One)
The most user-friendly menus provide easy accessibility to any or all the links that visitors need. However, this will be tricky for sites that have many pages, or a more complex layout.
Think about an oversized eCommerce store that has many product categories and subcategories, like Amazon.
Displaying every single product category during a standard menu wouldn’t be an honest idea. Shoppers would likely must scroll through the menu to search out the category they’re fascinated by.
This is where collapsible menus are available in. These menus organize their content in a very parent-child relationship. If the visitor clicks on a parent item in an exceedingly collapsible menu, then it'll expand to display all of that parent’s child content.
The Guardian news outlet uses a collapsible menu for its mobile site.
An example of a collapsible menu.
Collapsible menus are sometimes called expandable menus. this is often because their different sections expand when a visitor clicks on them.
By default, collapsible menus hide plenty of content and complexity from visitors. this is often rather more user-friendly than scrolling through a protracted list of categories and subcategories.
That said, let’s take a glance at how you'll easily create a collapsible sidebar menu on your WordPress site.
How to Create a Collapsible Sidebar Menu in WordPress
You can create a collapsible sidebar menu in WordPress using the Bellows Accordion Menu plugin.
Bellows Accordion Menu provides a handy shortcode so you'll be able to place your collapsible menu on any page, post, or widget area, including your sidebar.
A collapsible sidebar menu in WordPress.
First, you’ll have to install and activate the plugin. If you wish help, then please see our orientate a way to install a WordPress plugin.
Upon activation, attend the looks » Menus page in your WordPress dashboard.
Creating a menu within the WordPress dashboard.
To start, blood type 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'll be able to then click on the Create Menu button.
Next, you'll be able to choose the pages you would like to feature to the collapsible menu. By default, WordPress displays your most up-to-date pages only. If you would like to work out a listing of all of your website’s pages, then click on the View All tab.
Adding pages to your WordPress menu.
Alternatively, you'll click on Select All. this may add all of your pages to the collapsible menu.
Once you’re proud of your selection, click on the ‘Add to Menu’ button. you'll also select posts, blog categories, or add custom links. For more details, please see our orientate a way to add a navigation menu in WordPress.
After adding all of your different webpages to the menu, you'll move them around by dragging and dropping them. this may change the order these pages appear in your collapsible menu.
Collapsible menus are all about parent-child relationships.
When a visitor clicks a parent item in your collapsible menu, it'll expand to reveal all of the kid content.
To create this relationship, simply use drag and drop to rearrange all of your child pages beneath their parent.
Next, grab each child and drag it a touch to the proper. you'll be able to then release this page. this can indent the item and switch it into a toddler page.
Adding posts to the WordPress menu.
Don’t forget to click the Save Changes button when you’re finished.
Now we would like to feature this collapsible menu to the WordPress sidebar. To do this, we’ll use some shortcode that Bellows Accordion creates automatically.
To grab the shortcode, move to Appearance » Bellows Menu. If it isn’t already selected, then ensure you choose the Show All tab.
The collapsible menu shortcode within the WordPress dashboard.
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.
The next step is pasting this shortcode into a widget, so head over to Appearance » Widgets. this can display all of the widgetized areas within your current theme. the choices you see may vary, but most up-to-date WordPress themes feature a sidebar.
Configuring the collapsible sidebar menu.
Once you’ve found the sidebar area, provides it a click. This section will now expand.
To add a block, click on the + icon and begin typing Shortcode. When it appears, select the Shortcode block.
How to add a widget to the WordPress sidebar.
Now, simply paste your collapsible menu shortcode into this block. To publish your menu, you’ll must click on the Update button at the highest of your screen.
Now, after you visit your site you ought to see a brand new collapsible sidebar menu.
Example of a working collapsible menu
The Bellows Accordion plugin makes it super easy to customize this default menu. for instance, you would possibly change its combination to raised reflect your site’s branding.
If you would like to tweak the default menu, simply move to Appearance » Bellows Menu in your WordPress dashboard.
This menu has all the settings you wish to customize your collapsible menu. There are plenty of settings to explore. However, you'll want to begin by visiting Main Configuration » Basic Configuration.
Configuring the design and feel of your WordPress collapsible sidebar menu.
Here, you'll be able to switch between several different menu colors. you'll be able to also choose whether visitors can expand multiple submenus without delay using the Accordion Folding settings.
To change the menu’s alignment and width, click on the ‘Layout & Position’ tab.
Placing the collapsible menu on the WordPress website.
If you’d favor to preview your changes in real time, then you'll be able to edit the collapsible sidebar menu within the WordPress Customizer. To do this, head over to Appearance » Customize.
In the left-hand bar, select Bellows.
Configuring your collapsible menu within the WordPress Customizer.
Here, you’ll find plenty of different settings for your collapsible sidebar. This includes changing its width, alignment, and also the color of your sidebar menu.
We hope this text helped you learn the way to form a collapsible sidebar menu in WordPress. you'll also bear our orient the way to track your website visitors, and also the best push notification software to grow your traffic.
