The Mega Menu theme component lets you create a large full width site header menu with both links and images.
Here’s how the settings work
The mega menu
menu items setting uses a flexible notation system to build menu items. The format is
Supports three values
- Order is the order the menu item appears within its context
- Label is the menu label (the text you see)
- Key is the key used to identify the item. This is optional. If not provided, an underscored version of the label will be used, e.g.
- The modifier
^can be added at the end of the
labelvalue to identify the item as a “primary” item (appearing in the header)
An example is
This item will:
- appear in the header: because of the modifier
- appear first in the header: because of the order
- have the label
- have the key
The HTML title for the menu item
If provided, the menu item will be an anchor link (i.e.
<a>) with a
href value filled by this setting. If not provided, the menu item will be a
If provided, the menu item will have this image as its background and have a height of 250px and a width of 350px.
This is what you use to nest items in others. The item will become a “child” of whatever item’s key is entered here.
The mega menu on try.thepavilion.io has these list items
1:Services:services^~~Pavilion's Support Services~~#~~#~~# 1:Policy and Schedule:policy~~Pavilion's Support Policy and Schedule~~https://thepavilion.io/t/pavilions-support-policy-and-schedule/3312~~#~~services 2:try.thepavilion.io:try~~Pavilion's staging server~~https://thepavilion.io/t/try-thepavilion-io/3042/2~~https://thepavilion.io/uploads/default/optimized/2X/b/b44586f82f1994286185e9d5540973a25ebfd243_2_1094x1000.jpeg~~services 1:How to update~~How to update your discourse~~#~~#~~policy 2:When to update~~When to update your discourse~~#~~#~~policy 3:Why to update~~Why to update your discourse~~#~~#~~policy
Mobile Menu Label
This is the label for the mobile toggle that will show on mobile devices.
On topic scroll
How the menu is handled in topics when the user scrolls