Builder IFrame

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.

align-left (class)

forces a secondary item to go to the left-most column of the menu dropdown

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:

--ilw-color--background

Global style: Background color

--ilw-color--text

Global style: Text color

--ilw-color--border

Global style: Border color

--ilw-color--border-light

Global style: Light border color

--ilw-color--link

Global style: Link color

--ilw-color--link-hover

Global style: Link hover color

--ilw-color--link-visited

Global style: Link visited color

--ilw-color--heading

Global style: Heading color

--ilw-color--heading-link

Global style: Heading link color

--ilw-color--heading-link-hover

Global style: Heading link hover color

--ilw-color--heading-link-visited

Global style: Heading link visited color

--ilw-color--control

Global style: Control color

--ilw-color--control-text

Global style: Control text color

--ilw-color--control-accent

Global style: Control accent color

--ilw-color--control-accent-text

Global style: Control accent text color

--ilw-color--table-border

Global style: Table border color

--ilw-color--table-background

Global style: Table background color

--ilw-color--table-row-stripe

Global style: Table row stripe color

--ilw-color--table-head-background

Global style: Table head background color

--ilw-color--table-head-color

Global style: Table head text color

--ilw-color--focus--background

Global style: Focus background color

--ilw-color--focus--text

Global style: Focus text color

--ilw-color--focus--outline

Global style: Focus outline color

--ilw-margin--side

Global style: Side margin in pixels

--ilw-panel--color

Global style: Panel color (depreciated)

--ilw-panel--highlighted-color

Global style: Panel highlighted color (depreciated)

--ilw-panel--focused-color

Global style: Panel focused color (depreciated)

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.

Copied to clipboard

This is the additional HTML used to test the item.

<ul> <li> <ilw-header-megamenu-section class='solo-list'> About <ul> <li><a href='/'>Directory</a></li> <li><a href='/'>Departments</a></li> <li><a href='/'>News</a></li> <li><a href='/'>Events</a></li> <li><a href='/'>Careers</a></li> <li><a href='/'>Contact</a></li> <li><a href='/'>Visit</a></li> </ul> </ilw-header-megamenu-section> </li> <li> <ilw-header-megamenu-section> Admissions <ul> <li><a href='/'>Undergrad Admissions</a> <ul> <li><a href='/'>Apply</a></li> <li><a href='/'>Majors</a></li> <li><a href='/'>Cost and Aid</a></li> </ul> </li> </ul> <ul> <li><a href='/'>Graduate Admissions</a> <ul> <li><a href='/'>Apply</a></li> <li><a href='/'>Majors</a></li> <li><a href='/'>Cost and Aid</a></li> </ul> </li> </ul> <ul> <li><a href='/'>International Admissions</a></li> </ul> </ilw-header-megamenu-section> </li> <li> <ilw-header-megamenu-section class='solo-list'> Academics <ul> <li><a href='/'>Degrees</a></li> <li><a href='/'>Honors Programs</a></li> <li><a href='/'>Online Programs</a></li> <li><a href='/'>Certificates</a></li> <li><a href='/'>Academic Calendar</a></li> </ul> </ilw-header-megamenu-section> </li> <li> <ilw-header-megamenu-section class='solo-list'> Research <ul> <li><a href='/'>Research Centers</a></li> <li><a href='/'>History</a></li> <li><a href='/'>Resources</a> </ul> </ilw-header-megamenu-section> </li> <li> <ilw-header-megamenu-section class='solo-list'> Community <ul> <li><a href='/'>Visit</a></li> <li><a href='/'>Student Life</a></li> <li><a href='/'>Public Events</a></li> <li><a href='/'>First-Gen Services</a></li> </ul> </ilw-header-megamenu-section> </li> <li> <ilw-header-megamenu-section class='solo-list'> Alumni <ul> <li><a href='/'>Get Involved</a></li> <li><a href='/'>Awards</a></li> <li><a href='/'>Give</a></li> <li><a href='/'>Events</a></li> </ul> </ilw-header-megamenu-section> </li> </ul>

<ul> <li> <ilw-header-megamenu-section class='solo-list'> Single Unordered List <ul> <li><a href='/'>Undergrad Admissions</a></li> <li><a href='/'>Graduate Admissions</a></li> <li><a href='/'>International Admissions</a></li> <li><a href='/'>Degrees</a></li> <li><a href='/'>Certificates</a></li> <li><a href='/'>Online Programs</a></li> <li><a href='/'>Research Focus Areas</a></li> <li><a href='/'>Find a mentor</a></li> <li><a href='/'>Degrees</a></li> <li><a href='/'>Certificates</a></li> <li><a href='/'>Online Programs</a></li> <li><a href='/'>Undergrad Admissions</a></li> <li><a href='/'>Graduate Admissions</a></li> <li><a href='/'>Online Programs</a></li> <li><a href='/'>Research Focus Areas</a></li> <li><a href='/'>Find a mentor</a></li> <li><a href='/'>Degrees</a></li> <li><a href='/'>Certificates</a></li> <li><a href='/'>Online Programs</a></li> <li><a href='/'>Undergrad Admissions</a></li> <li><a href='/'>Graduate Admissions</a></li> </ul> </ilw-header-megamenu-section> </li> <li> <ilw-header-megamenu-section> Distinct Columns <ul> <li><a href='/'>Undergrad Admissions</a> <ul> <li><a href='/'>Apply</a></li> <li><a href='/'>Majors</a></li> <li><a href='/'>Cost and Aid</a></li> </ul> </li> <li><a href='/'>Graduate Admissions</a> <ul> <li><a href='/'>Apply</a></li> <li><a href='/'>Majors</a></li> <li><a href='/'>Cost and Aid</a></li> </ul> </li> <li><a href='/'>International Admissions</a></li> </ul> <ul> <li><a href='/'>Degrees</a></li> <li><a href='/'>Certificates</a></li> <li><a href='/'>Online Programs</a></li> </ul> <ul> <li><a href='/'>Undergrad Admissions</a></li> <li><a href='/'>Graduate Admissions</a></li> <li><a href='/'>International Admissions</a> <ul> <li><a href='/'>Degrees</a></li> <li><a href='/'>Certificates</a></li> <li><a href='/'>Online Programs</a></li> <li><a href='/'>Research Focus Areas</a></li> </ul> </li> <li><a href='/'>Find a mentor</a></li> <li><a href='/'>Student Handbook</a></li> </ul> <ul> <li><a href='/'>Undergrad Admissions</a></li> <li><a href='/'>Graduate Admissions</a></li> <li><a href='/'>International Admissions</a> <ul> <li><a href='/'>Degrees</a></li> <li><a href='/'>Certificates</a></li> <li><a href='/'>Online Programs</a></li> <li><a href='/'>Research Focus Areas</a></li> </ul> </li> </ul> </ilw-header-megamenu-section> </li> <li> <ilw-header-megamenu-section> Decorative Image <ul> <li><a href='/'>Undergrad Admissions</a></li> <li><a href='/'>Graduate Admissions</a></li> <li><a href='/'>International Admissions</a></li> <li><a href='/'>Degrees</a></li> <li><a href='/'>Certificates</a></li> </ul> <img src='https://fastly.picsum.photos/id/1025/500/400.jpg?hmac=MPFZjsU2UG1Mr3SjMkYP2F9jnhQWyatt6soxbOj0TN4' alt=''> </ilw-header-megamenu-section> </li> <li> <ilw-header-megamenu-section> CTA with image <ul> <li><a href='/'>Undergrad Admissions</a></li> <li><a href='/'>Graduate Admissions</a></li> <li><a href='/'>International Admissions</a> <ul> <li><a href='/'>Degrees</a></li> <li><a href='/'>Certificates</a></li> <li><a href='/'>Online Programs</a></li> <li><a href='/'>Research Focus Areas</a></li> </ul> </li> <li><a href='/'>Find a mentor</a></li> <li><a href='/'>Student Handbook</a></li> </ul> Prospective students <button class='ilw-button ilw-theme-orange-1'>Link 2</button> <img src='https://picsum.photos/id/37/300/300' alt=''> </ilw-header-megamenu-section> </li> <li> <ilw-header-megamenu-section> Plain CTA <ul> <li><a href='/'>Undergrad Admissions</a></li> <li><a href='/'>Graduate Admissions</a></li> <li><a href='/'>International Admissions</a></li> <li><a href='/'>Degrees</a></li> <li><a href='/'>Certificates</a></li> <li><a href='/'>Undergrad Admissions</a></li> <li><a href='/'>Graduate Admissions</a></li> <li><a href='/'>International Admissions</a></li> <li><a href='/'>Degrees</a></li> <li><a href='/'>Certificates</a></li> </ul> <ul> <li><a href='/'>Undergrad Admissions</a></li> <li><a href='/'>Graduate Admissions</a></li> <li><a href='/'>International Admissions</a> <ul> <li><a href='/'>Degrees</a></li> <li><a href='/'>Certificates</a></li> <li><a href='/'>Online Programs</a></li> <li><a href='/'>Research Focus Areas</a></li> </ul> </li> <li><a href='/'>Find a mentor</a></li> <li><a href='/'>Student Handbook</a></li> </ul> Prospective students <button class='ilw-button ilw-theme-orange-1'>Link 2</button> Prospective students <button class='ilw-button ilw-theme-orange-1'>Link 2</button> </ilw-header-megamenu-section> </li> </ul>