English Tiếng Việt
See demo Get started
Menu items

Split submenus into columns, add dividers, and pin items

When a submenu has many items, a single long column is hard for shoppers to scan. You can split the menu into columns, add dividers to separate groups, or pin the most important items at the top and bottom of the menu.

Split a submenu into columns in Desktop Mega Menu

In Desktop Mega Menu, you split a submenu into columns by setting a width in the Width layout field for each column.

  1. Open the level 1 item you want to split into columns, find the Multi-column layout section, then turn on Split menu into columns. When it’s on, each level 2 item below becomes its own column, and the level 3 items sit inside that column.

  2. Click each level 2 item that acts as a column to open its Edit item panel.

  3. In the Width layout field, choose a column width on a 12-part grid. Columns on the same row must add up to exactly 12/12.

  4. Click Save, then open your store to check.

    Three 4/12 + 4/12 + 4/12 columns in one submenu

Some common ways to split columns:

Layout Choose in Width layout
4 equal columns 3/12 + 3/12 + 3/12 + 3/12
3 equal columns 4/12 + 4/12 + 4/12
2 equal columns 6/12 + 6/12
Left column one-third of the width 4/12 + 8/12

Column names only show in the app, so you can tell them apart while editing. They don’t appear as menu items on your store.

Note

Navi+ recommends the 12-part grid. The Automatic option, a 10-part grid, fixed widths, or Hug content can make the layout jump when the menu opens.

To limit the maximum width of the whole submenu, type a number of pixels in the Multi-column submenu width (px) field at the level 1 item. If you leave it empty, the submenu uses the menu’s overall width.

Add dividers between items

You can add a divider to your menu in two ways:

  • Add a line directly under an existing item: open that item’s Edit item panel, then turn on Add divider.
  • Create a standalone divider row: click Add item, go to the Basics group, and choose Divider. This item shows only a horizontal line, with no text or icon.

To change the style of the dividers for the whole menu, go to the Configure step and open the Divider tab. You can also click the Divider button in Advanced display settings in the Design step to open this tab directly.

Option Meaning
Color The color of the line
Size (px) The thickness in pixels
Type The line style: Solid is a solid line, Dashed is a dashed line, Dotted is a dotted line, and Double is a double line
Width The length of the line: Full spans the full width, Inset is indented at both ends, and Under text spans only under the text

Settings in the Configure step are the default for the whole menu. If you set a custom divider style in an item’s Edit item panel, that item uses its own style instead.

Note

In each item's Edit item panel, the Type and Width fields for a divider are locked on the Starter plan. Business or higher is needed. The menu-wide Divider tab isn't marked as locked.

Pin the header or footer in a Mobile Menu

In a Mobile Menu, you can keep a part such as a search box at the top, or a part such as a log-in button at the bottom, fixed in place while shoppers scroll the list in the middle. To mark the boundary of the pinned area, add a special item called Sticky line.

  1. Click Add item, go to the Special group, and choose Sticky line.

  2. Choose Pin header to pin the top of the menu, or Pin footer to pin the bottom of the menu.

  3. Drag this row to the spot that marks the boundary in the menu tree:
    • Items above the Pin header row stay fixed at the top of the menu.
    • Items below the Pin footer row stay fixed at the bottom of the menu.
    The Sticky line row splits the menu into a pinned part and a scrolling part

  4. Click Save, then open the Mobile Menu on your store to check.

    The top and bottom stay in place, and the middle scrolls

The Sticky line row is only a marker for the app. It doesn’t show on your store.

If you want to save space on small phone screens, you can also turn on Auto-hide while scrolling. The pinned top then slides out of view when shoppers scroll down and reappears when they scroll up. The pinned bottom works the other way round.

Common issues

A pinned item has no effect

Check these points in order:

  • Are you editing the right Mobile Menu? The Sticky line item only works in a Mobile Menu, because only this menu type has its own scrolling area to pin items in.
  • Is the Sticky line row at level 1? You can’t drag it into a level 2 or level 3 sub-item.
  • Does the menu have extra pin rows? Each menu can use only one Pin header row and one Pin footer row, and Pin header must sit above Pin footer. Extra or misplaced rows get a red border in the menu tree and show a warning when you click Save. On your store, the menu uses only the first valid row at each end.

Also keep the pinned area short. On small phone screens, a long pinned area takes up room from the scrolling list in the middle.

How do I change the divider to dashed or dotted?

Go to the Configure step, open the Divider tab, then change Type to Dashed or Dotted. If you’re editing a single item in its Edit item panel and this field is locked, per-item styling isn’t available on the Starter plan. It needs Business or higher.

The submenu is too tall and the level 3 column is cut off

When the submenu is too tall and the level 3 list is cut off from view, you can use custom CSS to pin the level 3 list to the top of the menu. See Custom CSS, reusable classes, and fonts.

Other platforms

The steps above are for Shopify — the default way.

Related articles

Did this page help?

Need a hand? Chat with us in the app or write to [email protected] — send your store URL and the menu name.