How to Create a Collapsible Sidebar Menu in WordPress (The Easy Way)

How to Generate a Collapsible Sidebar Menu in WordPress


Do you want to develop a collapsible sidebar menu in WordPress?

A collapsible menu can give your internet site site visitors an effortless way to entry a lot of inbound links, without cluttering up your sidebar. It is fantastic for big websites, eCommerce stores, or any internet site that has a extra complex format. 

In this posting, we will show you how to conveniently produce 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 person-welcoming menus present straightforward accessibility to all the hyperlinks that site visitors have to have. Even so, this can be challenging for web-sites that have lots of pages, or a far more complicated format. 

Believe about a substantial eCommerce retailer that has a lot of product or service classes and subcategories, these kinds of as Amazon. 

Displaying each and every solitary item classification in a normal menu would not be a great concept. Buyers would most likely will need to scroll as a result of the menu to discover the group they’re intrigued in. 

This is exactly where collapsible menus come in. These menus arrange their written content in a mother or father-little one connection. If the customer clicks on a mum or dad item in a collapsible menu, then it will develop to display all of that parent’s kid content. 

The Guardian news outlet makes use of a collapsible menu for its cellular web page.

An example of a collapsible menu.

Collapsible menus are in some cases called expandable menus. This is for the reason that their unique sections grow when a customer clicks on them. 

By default, collapsible menus hide a whole lot of content and complexity from site visitors. This is a great deal far more consumer-welcoming than scrolling by means of a prolonged listing of types and subcategories.

That claimed, let us take a seem at how you can effortlessly create a collapsible sidebar menu on your WordPress web site.

How to Generate a Collapsible Sidebar Menu in WordPress

You can create a collapsible sidebar menu in WordPress applying the Bellows Accordion Menu plugin.

Bellows Accordion Menu supplies a useful shortcode so you can place your collapsible menu on any webpage, publish, or widget space, including your sidebar.

A collapsible sidebar menu in WordPress.

To start with, you are going to have to have to set up and activate the plugin. If you have to have support, then be sure to see our information on how to put in a WordPress plugin

On activation, go to the Overall look » Menus website page in your WordPress dashboard. 

Creating a menu in the WordPress dashboard.

To begin, variety a identify for your menu into the ‘Menu Name’ area. Your internet site website visitors will not see the identify considering the fact that it is for your individual reference only. You can then simply click on the Produce Menu button. 

Following, you can pick the webpages you want to increase to the collapsible menu. By default, WordPress displays your most modern webpages only. If you want to see a list of all your website’s pages, then click on on the Check out All tab. 

Adding pages to your WordPress menu.

Alternatively, you can click on on Choose All. This will incorporate all of your web pages to the collapsible menu.

After you’re happy with your assortment, simply click on the ‘Add to Menu’ button. You can also choose posts, site categories, or include custom one-way links. For much more information, remember to see our manual on how to insert a navigation menu in WordPress.

Right after including all of your different webpages to the menu, you can go them around by dragging and dropping them. This will adjust the get these web pages appear in your collapsible menu. 

Collapsible menus are all about mum or dad-child interactions.

When a visitor clicks a father or mother product in your collapsible menu, it will increase to expose all of the child content.

To build this marriage, simply just use drag and fall to prepare all of your little one webpages beneath their mum or dad.

Next, seize just about every child and drag it a tiny to the ideal. You can then launch this web page. This will indent the item and turn it into a kid webpage. 

Adding posts to the WordPress menu.

Do not overlook to click the Help you save Adjustments button when you’re concluded.

Now we want to include this collapsible menu to the WordPress sidebar. To do this, we’ll use some shortcode that Bellows Accordion creates mechanically. 

To grab the shortcode, go to Visual appearance » Bellows Menu. If it is not presently picked, then make certain you decide on the Present All tab.

The collapsible menu shortcode in the WordPress dashboard.

You can now simply click on the Shortcode box, which ought to emphasize all of the code. Now, duplicate this code working with either the Command + c or Ctrl + c keyboard shortcut. 

The upcoming move is pasting this shortcode into a widget, so head about to Overall look » Widgets. This will show all of the widgetized places within your present-day concept. The selections you see might change, but most fashionable WordPress themes characteristic a sidebar.

Configuring the collapsible sidebar menu.

The moment you’ve uncovered the sidebar location, give it a simply click. This portion will now grow.

To add a block, click on on the + icon and begin typing Shortcode. When it seems, choose the Shortcode block. 

How to add a widget to the WordPress sidebar.

Now, basically paste your collapsible menu shortcode into this block. To publish your menu, you’ll need to click on on the Update button at the best of your screen. 

Now, when you go to your web site you should see a new collapsible sidebar menu. 

Example of a working collapsible menu

The Bellows Accordion plugin makes it tremendous uncomplicated to customize this default menu. For illustration, you may improve its color scheme to better replicate your site’s branding. 

If you want to tweak the default menu, merely go to Physical appearance » Bellows Menu in your WordPress dashboard. 

This menu has all the configurations you need to have to customize your collapsible menu. There are a great deal of settings to take a look at. Nevertheless, you might want to start by heading to Primary Configuration » Basic Configuration.

Configuring the look and feel of your WordPress collapsible sidebar menu.

Here, you can swap amongst many distinctive menu hues. You can also pick whether or not site visitors can grow many submenus at as soon as making use of the Accordion Folding settings. 

To modify the menu’s alignment and width, click on on the ‘Layout & Position’ tab.

Placing the collapsible menu on the WordPress website.

If you’d want to preview your improvements in serious time, then you can edit the collapsible sidebar menu in the WordPress Customizer. To do this, head around to Visual appearance » Customize

In the left-hand bar, choose Bellows. 

Configuring your collapsible menu in the WordPress Customizer.

Right here, you’ll obtain a lot of different settings for your collapsible sidebar. This consists of changing its width, alignment, and the coloration of your sidebar menu. 

We hope this post aided you understand how to produce a collapsible sidebar menu in WordPress. You can also go via our guide on how to monitor your web page readers, and the very best force notification computer software to mature your targeted visitors. 

If you preferred this write-up, then make sure you subscribe to our YouTube Channel for WordPress movie tutorials. You can also come across us on Twitter and Fb.



Leave a Reply

Your email address will not be published.