Menu Item Settings > Submenu
Overview
The elements in a mega submenu will be organized into columns.
Each column can be sized naturally (to the contents of that column) or as a percentage of the submenu width.
TIP: If your submenu items take up more than one row, or you want them to expand evenly across the submenu, you will want to use Grid (percentage) column widths
Natural column widths
By default, each column in the submenu will be as wide as its widest submenu item. For example, below you see that the Whoa, this is a very long menu item! forces the Movies column to be extra wide.
Natural column widths work best for submenus with only a few columns of items, that you want to size to the contents.
Grid (percentage) column widths
Grid column widths are defined as a percentage of their container. Therefore, to use Grid Column Widths, the submenu must have a predetermined width, rather than sizing to its contents. This means the submenu must either be Full Width or have an explicit width set, but it cannot be a Natural Width submenu, as this creates a circular reference.
Using grid column widths, you can specify a percentage of the submenu that each column should occupy (expressed as a fraction). In the example above, we have 6 submenu columns, so we will set the grid columns to 1/6. The result is 6 equal-width columns (each takes up one sixth of the submenu width). Any extra long text is forced to wrap to a new line within that column:
You can set a default grid column width for the submenu, and that width can be overridden on a per-item basis.
Setting the Submenu Width
If you’re using grid column widths, and your Submenu Position is not set to Full Width, you’ll need to set an explicit width for your submenu.
Submenu Column Default
By setting the Submenu Column Default on a parent item, each child item in the submenu will take on this column width when its own Columns Width is set to Automatic (the default).
If you want to set up a submenu with a specific number of equal-width columns, this is how to do it.
Auto Row
If you have multiple rows of columns, you may want to enable Auto Row. What this means is that if you set the Submenu Columns default to 1/6th, then the 7th item will automatically start a new row. Note that If you are going to change the widths of the submenu columns individually, you should leave this disabled. For more fine-grained control, you can use the Layout > New Row setting on the item that should start the next row.
Individual Item Columns
To set the column width for an individual submenu item, you can do that in the Menu Item Settings > Layout tab. Setting this to anything other than “Automatic” will override any defaults inherited from the submenu settings of the parent item.
This allows you to set a default of 6 columns (via the Submenu Column Default setting on the parent item), and then have 5 submenu items, 4 of which inherit the default, and one of which is set to 1/3rd to take up a double-width column.
Submenu Automatic Columns
(Since v3.2.1)
This setting automatically divides up submenu items of a given item into equal columns.
Case 1: Submenu Columns Without Headers
If you are using second level items only, and no third level items, you may want to use the Submenu Automatic Columns setting. This allows you to divide up your items into multiple columns without headers. This is equivalent to using Column Items, but the division is done automatically.
If you want your items to organize top to bottom, then start a new column, use this setting. If you want your items to organize left to right, then begin a new row, use the Submenu Column Default setting.
Case 2: Multiple Columns Below a Single Header
This is also useful if you want to split up the child items of a submenu header into two columns below that header.
Note that if you’re using Submenu Columns for your submenus, you’ll probably want to double the column header item’s width to accommodate the two columns below it. So if you’re using 1/4 as the width for your normal columns, you’d want to set the header with the 2 columns below it to 1/2 (in this case, “Sports”), if you’re using 2 automatic columns. In other words, multiply the width of the header column by the number of automatic submenu columns you’re creating.
Default:
All children of “Sports” appear in a single column
Submenu Automatic Columns: 2
The children of “Sports” are automatically divided into a single column, but still within the same boundaries – the “Sports” group is still the same width.
Submenu Automatic Columns: 2, Header Column Width: Doubled
The width of “Sports” has doubled, so now each column below “Sports” is the same width as the original single-column
Submenu column Default: 1/2
The width of “Sports” is left doubled here, but rather than having 2 columns each containing 4-5 items, the 9 items are each 1/2 width and wrap, forming two columns visually, but organized left to right rather than top to bottom.
