Component: Header Mega Menu latest

This builder will allow you to generate a custom version of the Header Mega Menu component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

compact (attribute)

Whether or not it is compact

width (attribute)

The width it switches to compact, in pixels. Must be a number. Default is 990.

wrapper-list (fixed class)

allows you to break mulitple uls within a slot into a 4 column grid

solo-list (class)

allows you to have a single list with a fixed background height and fills up the 4 columns, maxing out at 20 items with no nesting

span-2 (class)

Allows a secondary item to fill up two columns at a time

span-3 (class)

Allows a secondary item to fill up three columns at a time

Custom CSS Variables and Styles (advanced use only)

Parent style:

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.

Details

Mega Menu for the top of the page.

Toolkit Permalink: http://builder3.toolkit.illinois.edu/component/ilw-header-megamenu/toolkit/index.html

Full Version: 2.0-alpha

Type: web component

Date Created: 06/12/2026

Version notes:

Github repository: https://github.com/web-illinois/ilw-header-megamenu/

Javascript file: https://dev.toolkit.illinois.edu/ilw-header-megamenu/latest/ilw-header-megamenu.js

CSS file: https://dev.toolkit.illinois.edu/ilw-header-megamenu/latest/ilw-header-megamenu.css

JSON information: ilw-header-megamenu.latest.json