Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

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

A collapsible menu can give your website visitors an easy way to access a lot of links without cluttering up your sidebar. It’s perfect for large websites, eCommerce stores, or any site that has a more complex layout. 

In this article, we will show you how to easily 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 access to all the links that visitors need. However, this can be tricky for WordPress websites that have lots of pages or a more complex layout. 

Think about a large eCommerce store that has lots of product categories and subcategories, such as Amazon. 

Displaying every single product category in a standard menu wouldn’t be a good idea. Shoppers would likely need to scroll through the menu to find the category they’re interested in. 

This is where collapsible menus come in. These menus organize their content in a parent-child relationship. If the visitor clicks on a parent item in a collapsible menu, then it will 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 sidebar menus are sometimes also called expandable menus. This is because their different sections expand when a visitor clicks on them. 

By default, collapsible menus hide a lot of content and complexity from visitors. This is much more user-friendly than scrolling through a long list of categories and subcategories on your WordPress blog.

That said, let’s take a look at how you can easily create a collapsible sidebar menu on your WordPress site.

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, then just keep reading.

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 to place your collapsible menu on any page, post, or widget area, including your sidebar.

A collapsible sidebar menu in WordPress.

First, you’ll need to install and activate the Bellows Accordion Menu plugin. If you need help, then please see our beginner’s guide on how to install a WordPress plugin

Upon activation, visit the Appearance » Menus page in your WordPress dashboard. 

Creating a menu in the WordPress dashboard.

To start, type a 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 can then click on the ‘Create Menu’ button. 

Next, choose the pages you want to add to the collapsible sidebar menu. By default, WordPress displays your most recent pages only.

If you want to see a list of all your website’s pages, then click on the ‘View All’ tab. 

Adding pages to your WordPress menu.

Alternatively, you can click on ‘Select All’. This will add all of your pages to the collapsible menu.

Once you are happy with your selection, click on the ‘Add to Menu’ button. You can also select posts, and blog categories, or add custom links. For more details, please see our guide on how to add a navigation menu in WordPress.

After adding all of your different web pages to the menu, you can move them around by dragging and dropping them. This will 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 will expand to reveal all of the child content.

To create this relationship, simply use drag and drop to arrange all of your child’s pages beneath their parent.

Next, grab each child and drag it a little to the right. You can then release this page. This will indent the item and turn it into a child page. 

Adding posts to the WordPress menu.

Don’t forget to click the ‘Save Changes’ button when you are finished.

Now, we want to add this collapsible menu to the WordPress sidebar. To do this, we will use some shortcodes that Bellows Accordion creates automatically. 

To grab the shortcode, go to the Appearance » Bellows Menu page from the WordPress dashboard. If it isn’t already selected, then make sure you select the ‘Show All’ tab.

The collapsible menu shortcode in 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 the Appearance » Widgets page from the admin area.

This will display all of the widget areas within your current theme. The options you see may vary, but most modern WordPress themes feature a sidebar.

Configuring the collapsible sidebar menu.

Once you’ve found the sidebar area, give it a click. This section will now expand.

To add a block, click on the + icon and start 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 need to click on the ‘Update’ button at the top of your screen. 

Now, when you visit your site, you should see a new collapsible sidebar menu. 

Example of a working collapsible menu

The Bellows Accordion plugin also makes it super easy to customize this default menu. For example, you might change its color scheme to better reflect your site’s branding. 

If you want to tweak the default menu, simply go to the Appearance » Bellows Menu page in your WordPress dashboard. 

This menu has all the settings you need to customize your collapsible menu. There are a lot of settings to explore. However, you may want to start by going to Main Configuration » Basic Configuration.

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

Here, you can switch between several different menu colors. You can also choose whether visitors can expand multiple submenus at once 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 prefer to preview your changes in real time, then you can edit the collapsible sidebar menu in the WordPress Customizer.

To do this, head over to the Appearance » Customize page from the admin area and select the ‘Bellows’ tab from the left column.

Configuring your collapsible menu in the WordPress Customizer.

Here, you’ll find lots of different settings for your sidebar. These include changing its width, alignment, and the color of your collapsible sidebar menu. 

Bonus: WordPress Sidebar Tricks to Get Maximum Results

Once you have created a collapsible sidebar menu, you can use some other tips to generate more leads with the help of your sidebar.

For example, you can make your sidebar widget sticky so that it is visible on the page even as the user scrolls down.

Other than that, you can add a contact form or email sign-up form in your sidebar to build your email list. To do this, you can use WPForms, which is the best contact form plugin on the market.

You will simply need to create a form and then add it to your sidebar using the WPForms block in the block menu.

Add WPForms widget block

For more details, you can see our tutorial on how to create a contact form in WordPress.

Additionally, you can display your most popular posts in the sidebar, add images, show social media icons, and display social proof. This will encourage users to explore your site more and boost your conversions.

For more tips, you can see our list of the best WordPress sidebar tricks to get maximum results.

We hope this article helped you learn how to create a collapsible sidebar menu in WordPress. You can also go through our guide on how to track your website visitors and the best push notification software to grow your traffic. 

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

4 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    For websites that have many categories, this is the perfect option to make the sidebar clear. I now have about 15 categories on the site and am thinking about something similar to the accordion as well. Thanks for the inspiration.

  3. Tamie says

    Thank you for this. How can you adjust the spacing between the subcategories? I have a lot of categories and having what looks like a double line space in between make the menus very long.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.