UberMenu 3 Submenu Layouts

UberMenu includes a built-in grid system that can be used to layout your submenus.

By default, each submenu column is sized naturally

Natural-width submenu items

The width of the column depends on the width of the contents.

Small Item
Medium Lenth Item
A very long item that you would probably want to wrap because it looks dumb this way
Small Item
Small Item

Using the Grid to control column size

A Grid Column Submenu

By applying a 5-column grid to the submenu, each item becomes 20% of the submenu's width. Note that the submenu must have a defined width (be full-width or have an explicit width) for this to work.

The contents of long items are forced to wrap

1/5
Small Item
1/5
Medium Lenth Item
1/5
A very long item that you would probably want to wrap because it looks dumb this way
1/5
Small Item
1/5
Small Item

For a given submenu, you can set a default column width

Menu Item Settings > Submenu

Setting the default column width to 1/3 would result in this layout:

1/3
Small Item
1/3
Medium Lenth Item
1/3
A very long item that you would probably want to wrap because it looks dumb this way
1/3
Small Item
1/3
Small Item

Each menu item's Column Layout can be configured individually, so you can create submenus with different width columns

Menu Item Settings > Layout

The above example, with the last two columns set to 1/2 to override the 1/3 default
1/3
Small Item
1/3
Medium Lenth Item
1/3
A very long item that you would probably want to wrap because it looks dumb this way
1/2
Small Item
1/2
Small Item
5 Columns, 1/4, 1/6, 1/6, 1/6, 1/4
1/4
Small Item
1/6
Medium Lenth Item
1/6
A very long item that you would probably want to wrap because it looks dumb this way
1/6
Small Item
1/4
Small Item

Using the special COLUMN menu item, you can create more advanced layouts

The Column is a wrapper which can be subdivided into smaller columns

The Column item is marked in orange. Note that the width of the menu items inside the Column item is relative to their wrapper (the Column), not that of the submenu.
2/3 Column Item
1/2
Small Item
1/2
Medium Lenth Item
Full
A very long item that you would probably want to wrap because it looks dumb this way
1/6
Small Item
1/6
Small Item
2/3 Column Item
1/2
Small Item
1/2
Medium Lenth Item
Full
A very long item that you would probably want to wrap because it looks dumb this way
1/3 Column Item
Full
Small Item
1/2
Small Item
1/2
Small Item