Mega menu design options

We provide multiple ways for you to customise the look and feel of your mega menu. 

Top-level menu items

On top-level menu items, you can choose how the flyout mega menu should be shown.

  • Flex (default)
    • Automatically size & space columns.
  • Grid
    • A fixed number of columns.

Flex is the easiest choice to get started. Grid is helpful in creating more advanced layouts.

Second-level design options

On second-level menu items, you can choose how the column of links (third-level menu items) is displayed. We provide a few different options. 

These options are only available on menu items that are on the second level of your menu (i.e. a child of a top-level menu item).

Column span

This is the number of columns that this menu item should use. Defaults to 1 and is only available when using the Grid Layout. 

Column design

Choose how the column of menu items should be shown. 

  • Simple (default)
    • A list of links
  • Images inline
    • A list of links and each one has its image shown in a circle next to it. 
  • Images only
    • Useful for promotional image blocks where you don't want the link text to be shown. 
  • Hidden
    • This can be useful on grid layouts to create a gap between columns. No menu items are shown.  

Wrap content

If your menu item spans multiple columns, you can use this option to spread the list across multiple columns. See examples on wrapping lists

Customize the look and feel with PageBuilder 

These options provide a starting point for how your menu should be shown on the storefront. To apply further styling changes like updating background colours and text formatting options, configure the menu widget in PageBuilder

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us