Megamenu Header and Big Footer

Last updated on
20 June 2024

**ATTENTION** For dropdown menus to work properly, you'll need to enable "Show as expanded" for each specific menu item with additional levels. You may also have to modify the menu block itself in order to allow for displaying multiple menu levels. For example, megamenu needs 3 levels for full display while big footer requires 2 levels.

Megamenu Header

If you're already using the default setup with the theme, you're pretty much already most of the way there. For the Megamenu to completely work, it requires three menu levels. The first level is your top bar. The second is basically your separated column placeholder and the third will be the list of links for that column.

Please see the following example on the USWDS: https://designsystem.digital.gov/components/headers/basic-mega/

"The second level is just a placeholder? But what if I want users to have clickable links?"

Good news, there is a setting for that. In the theme setting with megamenu, you'll see a checkbox below it for having the second tier as column headers. You won't see this on the above megamenu example with USWDS, but I added some twig to make it happen optionally. 

The Big Footer is a little easier than the megamenu. Basically it's the same concept, just one less level. For the menu, level one items are the headers and level 2 are the links below it. I think you'll figure it out.

**Note: For Megamenu and Big Footer, take caution on the amount of columns. (Less than 5 or 6) 

Help improve this page

Page status: No known problems

You can: