Submenu Columns

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.

Grid (percentage) column widths

Note that to use Grid Column Widths, they’ll need to be contained within a submenu with a predetermined width – this means the submenu must 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. For example, we have 6 submenu columns, so I will set the grid columns to 1/6. The result 6 even columns (each takes up one sixth of the submenu width). Any extra long text is forced to wrap to a new line:

You can set a default grid column width for the submenu, and that width can be overridden on a per-item basis.

Setting a Submenu Width

If you’re using grid column widths, and your submenu is not full-width, you’ll need to set an explicit width for your submenu.

Submenu Column Default

By setting the Submenu Column Default, each child item of that submenu will take on this column width when its own Columns Width is set to Automatic.

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, 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.

On this page