Mega Menu 🖼

The Mega Menu theme component lets you create a large full width site header menu with both links and images.

Screen Shot 2021-02-24 at 1.48.41 PM

:wrench: How to install

:computer: Get the code

:star: Example

Here’s how the settings work

Menu items

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. My Label becomes my_label.
  • The modifier ^ can be added at the end of the label value 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 1.
  • have the label Services.
  • have the key services.


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 <div>.


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 has these list items

1:Services:services^~~Pavilion's Support Services~~#~~#~~#
1:Policy and Schedule:policy~~Pavilion's Support Policy and Schedule~~'s staging server~~
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


I have a small bug with your mega super menu.

The bug is only present on smartphones.
Also in smartphone develop mode with Chrome under Windows.


In the menu above the text and the 2 images are not clickable. The selection seems to be bad.

View here :