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 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.
Row span
This is the number of rows that the menu item should span. Default to automatically spanning all rows. This can be useful in advanced layouts that use multi-row-grids. E.g. having a three row grid, where a couple of smaller lists are manually set to a Row Span of 1 will ensure that they stack.
Column design
Choose how the column of menu items should be shown.
We also have more examples of column design options.
- 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.
