A mega menu is a wide panel that opens below the navigation bar and lays a whole section out in columns, instead of a narrow submenu that unrolls one entry at a time.
Corpus turns it on on demand, one menu item at a time. A site that does not want one does not get one, and its menu is unchanged.
There is nothing to build. The panel is driven by the menu hierarchy: that is what makes the columns. You will not have to restate in a form what your menu already says.
When a mega menu is warranted
When one top-level item carries more than a dozen pages and those pages fall naturally into two or three families. An eighteen-line submenu is hard to scan; the same eighteen pages in three titled columns read at a glance.
Below about ten entries, the ordinary submenu stays clearer. A mega menu is not decoration: it answers a menu that has grown too long.
How to set one up
1. Trigger the panel
Open the top-level menu item that should open wide. Go to the Link Type tab, field Link CSS Style, and write mega.
That is all. The item keeps its page, its label and its icon.
The image fields trigger nothing. Link Image and Image Class already carry the menu icons; it is Link CSS Style that opens the panel, and only that one.
The word mega does not survive into the page: the template reads it, then strips it. If you write mega my-class, my-class stays on the link.
2. Make the columns
Each second-level item becomes a column.
For a non-clickable column heading, the usual case, create the item with the type Menu Heading (Joomla offers it under System Links). It leads nowhere, and that is the point: it names the column.
If you would rather the heading led to a page, create an ordinary item: its title stays a link. Both forms are drawn the same way.
3. Fill the columns
Third-level items are the pages of the column.
A page that has children of its own gets a chevron on its right: the fourth-level items form the drawer that unfolds beneath it, inside its own column, without pushing anything else around.
4. Check
| Level | What it becomes |
|---|---|
| 1 | The bar item, the one carrying mega |
| 2 | A column of the panel, with its heading |
| 3 | The pages of that column |
| 4 | The drawer folded under a page |
The mega menu is the only place in Corpus that goes four levels deep. Everywhere else the menu stops at three, and deeper items are ignored.
A column with no pages stays an empty column. If you put a childless item at the second level, it comes out with its heading and nothing under it. That is not a template fault: either give it pages, or move it out of the mega.
The setting
Styles → your style → Styles tab → Menu group.
One field: the minimum width of a column. Left empty, it is 16rem.
The number of columns is not a setting: it is the number of sections. A second-level item gives one column, always. The panel is therefore as wide as the sum of its columns, capped at the width of the site.
And that width is a floor, not an imposed width: a column whose labels are wider keeps them. On a menu with long labels, going from 12 to 16rem will therefore change nothing visible.
Use it to give air to a menu with short labels.
The panel never overflows. When there are too many sections for the width of your site, the columns narrow to fit the page: the minimum width gives way, and the labels wrap. Six sections at 16rem would need 96rem, about 1536px: in a 1140px site they share the room, with no horizontal scrollbar under the menu.
The same goes for zoom. At 200%, the available room is halved: three sections at 16rem fit in a 1140px site at normal size, and narrow at 200%.
Narrow columns stay on screen, but they breathe less. The remedy lies in the menu, not in the setting: fewer sections per panel, more panels. A six-column mega menu is no easier to read than a three-column one anyway.
The position of the panel is not adjustable: it aligns with the width of your page and cannot leave the screen.
Text alignment in submenus
In the Theme Customizer, Menu group, the Submenu alignment setting says where the text sits in submenus and in the mega menu: Start (the default), Centre or End.
It is independent of the menu bar alignment. A centred bar no longer centres its submenus: it can open panels aligned to the start, which are easier to scan. If you liked the old look, choose Centre.
On phones
The panel becomes a single-column accordion, and everything is folded. The visitor opens the menu, then a section, then a drawer, one notch at a time. Each notch is indented, so that it is clear what a page belongs to.
It is the same menu: nothing extra to set, and nothing to publish twice.
What the template does without being asked
The panel opens on click and closes on a second press, with the Esc key (one notch at a time), on a click outside, or as soon as the keyboard leaves it.
Two drawers in two different columns can stay open together: they are not competing for room. Opening a second mega menu, on the other hand, closes the first.
An item that has both a page and children carries two distinct controls: its label goes to its page, the chevron unfolds its children. Its page therefore never becomes unreachable.
Every chevron carries a written label for screen readers (Show the submenu of Daily life), and the tab order follows reading order exactly: one column is finished before the next begins.
If the panel does not open
Check, in this order:
Is the word in the right field? Link CSS Style, Link Type tab, on the top-level item. A mega set on a submenu item would have nowhere to show: it is ignored.
Does the item have published children? An empty panel does not open.
Is the cache cleared? After a template update, System → Clear Cache. Each style's stylesheet is cached.
Up to date for Corpus 2.1.704.