Mega Menu 🖼

Knowledge Discourse Themes
#1

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
Screen Shot 2021-02-24 at 1.48.41 PM1230×806 90.2 KB

: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

label~~title~~href~~img_src~~parent_key

Label

Supports three values

order:label:key
  • 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

1:Services:services^

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.

Title

The HTML title for the menu item

href

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

img_src

If provided, the menu item will have this image as its background and have a height of 250px and a width of 350px.

parent_key

This is what you use to nest items in others. The item will become a “child” of whatever item’s key is entered here.

Example

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

4 Likes