Free The Webal accordion menu layout is in the Free package and in Pro.
The Webal accordion menu shows a menu as a vertical list whose sub-menus open and close, like an accordion, and the branch that holds the page you are on is already open. Use it for sidebar menus, menus on small screens and footers. The sidebar of these instructions is an accordion menu.
It is a layout of Joomla's own Menu module, where a layout is a way of showing a module. You add a normal Menu module, choose the menu, and pick the layout. The accordion works with no script (a small program that runs in the browser), because it uses the browser's own open-and-close control, so it also works when scripts are turned off.
Add it to a page
Before you start, install the Webal menu layouts into your template, as the page Installing the menu layouts into templates shows. Make the menu items first, in the way described on The navbar at a glance.
- Open Content, then Site Modules. Press New and choose Menu.
- Type a Title, and give each menu on a page its own title, because screen readers (programs that read the page aloud) say it as the name of the menu.
- On the Module tab, choose your menu in Select Menu. Set Sub-menu Items to Show.
- Open the Advanced tab. In the Layout list, choose Webal accordion menu.
- Go back to the Module tab. Open the Position list and choose a position, for example sidebar-left.
- Under Title in the same column, choose Show or Hide, because the title is still the name that screen readers say for the menu.
- Press Save.
- Open the Menu Assignment tab. In Module Assignment, choose Only on the pages selected.
- Press None, because every page is ticked until you do this. Then type the name of a page in the search box and tick it.
- Press Save & Close, and then open that page on your site.
On the stock Cassiopeia template the Layout list shows the file name wbl-accordion, but a child theme made by the installer shows the readable name.
Menu module settings that still apply
Everything Joomla's Menu module does still works, because the items come from Joomla's own menu code. That covers published dates, access levels, Display in Menu, the language filter, Start Level, End Level, Base Item and Sub-menu Items, and an item whose parent is hidden is left out together with everything below it.
Each menu item's own settings are used too, which means the link title, link class, link relationship, icon class, picture, and where the link opens. A new window and a new tab both open a new tab.
- A heading, a separator or an item with no usable address is shown as text, not as a link.
- An alias goes to its target.
- A web address item must be an http or https address, a mail address with just the address, a phone number or a path on your site, and anything else, such as a
javascript:address, is shown as plain text. - A link that opens a new tab says so to screen readers.
- A menu goes at most six levels deep and shows at most 1,500 items.
If a Webal layout ever fails, the error is logged and Joomla's own default menu is shown instead, so the navigation never silently disappears.
Change the look with a profile
With no profile, the accordion uses its starting choices, and to change them you make an Accordion menu profile:
- Open Components, Webal Blocks, Menu profiles.
- Open the New list and choose Accordion menu profile.
- Type a Title, and then on the General tab, tick your Menu module in Menu modules.
- Choose the options in the table below, and then press Save.
| Tab | Option | What it does | Starting choice |
|---|---|---|---|
| General | Menu name for screen readers | The name that screen readers say for this menu. | Empty, so the module title is used |
| General | Sub-menus open | One at a time, or several at once. | One at a time |
| General | Open the current branch | Opens the branch that holds the current page by itself. | Yes |
| Look | Icon | An arrow or a plus sign. | An arrow |
| Look | Icon position | At the end of the row or at the start. | At the end of the row |
| Look | Style | Plain, lines between rows, or boxed rows. | Plain |
| Look | Animation | Same as the site setting, none, fade, or a short slide. | Same as the site setting |
| Look | Colour scheme | Inherit (follow the page), Light or Dark. | Inherit |
| Advanced | ID, CSS classes | An HTML id and extra class names. | Empty |
A stand-alone accordion slides open by default, and "Same as the site setting" and "Slide, short" both give that slide. Choose fade or none if you want to change it.
This profile has no Quick setup, because it has fewer than ten options on three short tabs, and none of them depends on another.
Caching
Use the Menu module's default caching, which is by menu item. Caching means that Joomla keeps a saved copy of a page and shows it again, and with the default, the current page is right on every page. Do not set the cache mode to Static, because the first page's current item would show everywhere.
Accessibility. The menu is a named navigation landmark. The name is the profile's name for screen readers, or else the Menu module title, or else "Menu", and two menus on one page need different names. The current page's link is underlined and marked for screen readers. A parent that is also a link is a link followed by a separate button ("Show submenu for ..."), because a link inside a button is not allowed, and the Tab key goes to the link, then the button, then the open sub-menu. Targets are 44 pixels high, the focus ring is 3 pixels and sits inside the item, and the open and close animation is off for visitors who ask for less motion. On paper every sub-menu is shown, so no link is lost, and the menu prints no headings.
Other languages. The hidden name of the sub-menu buttons comes from Joomla's language files in the language of the page. On a site with more than one language, you should make one Menu module and one profile for each language.