One of the most frequent requests I get from customers is how to create an accordion menu on their WordPress sites. Having researched the few existing options, and not feeling comfortable recommending any of these to my customers, I set out to create a smart, robust, flexible, and modern accordion menu plugin for WordPress.
Introducing Bellows
I’m very pleased to announce the release of the new Bellows Accordion Menu plugin for WordPress. Bellows is the culmination of almost a year of development and beta testing to produce a slick and easy to use accordion navigation solution.
Bellows comes in two flavors – Bellows Pro and Bellows Lite.
Bellows Lite – Accordion Menu is available on the WordPress plugin repository for free. It’s a fully functional standard accordion menu. The menu structure is built in the standard WordPress Appearance > Menus screen. It includes 3 skin presets, supports multiple submenu levels, multiple- or single-folding of submenus, automatic expansion of current submenus, and integration via either shortcode or widget.
Bellows Pro – Accordion Menu works on the same foundation as Bellows lite, and adds a variety of extra features that make the plugin very flexible and dynamic. These include:
- Over 20 Skins
- Style customizations via the Customizer, a well as individual menu item styles
- Icons and images within menu items
- Widgets and custom content within menu items
- Ability to automatically generate the accordion menu contents based on post or taxonomy term hierarchy
If you’re curious about the full feature set and want to see how Bellows works, check out the Bellows WordPress Accordion Menu demo site
Menu Generator UI
One of the features I’m most excited about is the Menu Generator UI. This feature gives the user the ability to quickly configure complex query filters to generate automatically populated menus, and preview the results in real time. The user simply checks the filters/parameters they wish to use to produce their menu results, and the interface provides a preview and the appropriate shortcode to be used. This feature gives users a lot of power to create the menu they want without needing any coding skills.
Moreover, the menu can be made dynamic relative to the current page. The auto-populated menu can inherit the current page as a parent, and can therefore dynamically change based on the currently viewed page. So a single menu could be used across the site to produce a hierarchical menu specific to that page, with minimal configuration.
Menu queries can also be saved and reconfigured at a later time, so that when a change needs to be made, it can be made in one location and propagate across the entire site.
Beyond just menu items
While accordions are great for standard navigation lists, Bellows also allows the insertion of any type of HTML, shortcode, or widget content. This means there are effectively no limits to the type of content that can be added within the accordion. Add images, icons, contact forms, third party content feeds, maps, and more!
Multiple Configurations
Bellows Pro’s Configuration system makes it easy to both configure separate menus independently, as well as re-use your settings across menus when desired. Create multiple configurations and apply them to your various menus as desired to control the look and feel of each accordion instance individually.
Why an accordion menu?
Accordion menus are pretty simple beasts. The menu has a hierarchical structure, and when a parent item is activated, its child items appear below it. Their usefulness is in the extremely clean hierarchical display that allows the user to explore a list of items. It’s a very common UI paradigm, seen in all sorts of interfaces. In fact, it’s become more common on mobile interfaces where content tends to stack vertically due to lack of horizontal screen real estate.
The real value in accordion menus is providing contextual content. They tend to be used as secondary navigation systems, and as such, may change from page to page. This is why the flexibility and dynamism of Bellows is so powerful, as it can be placed just about anywhere and display content based on the current page. Allowing the user to explore within the current context saves time and energy, helping them find the content they’re looking for more efficiently.
Complementing Ubermenu
One mistake I see UberMenu customers make is trying to add too much content to their primary navigation. A site’s primary navigation should generally have no more than 3 hierarchical levels, and less than 100 items. When well organized, this keeps the menu structure easily digestible by site visitors. But when a site has many levels of taxonomical terms or posts, it can be tempting to try to cram all of this structure into the primary navigation. Unfortunately, this often leads to an unusable menu, with so many items that visitors can’t actually find what they’re looking for, defeating the purpose of the navigation in the first place.
The solution is to have section-specific secondary menus on the site, which allow users to drill down further into the site contents within a given context. This is one thing that Bellows will help customers with large sites a lot – first, navigate to a section of the site using the main menu; then drill down within that section using an accordion menu in the sidebar. Bellows Pro’s dynamic menu content population can make this much easier to achieve.
Have you checked out the demo?
I’m really excited to release Bellows, and I really hope you enjoy it! Check out the Bellows demo for more information. Questions? Ask away by clicking the “Questions” button here: Bellows Pro
