Tab Bar and Floating Button: submenu expand style

In the Configure step of the Tab Bar and Floating Button, the Submenu Expand Style field chooses how the level 2 submenu panel opens when a shopper taps a menu item that has sub items.

Desktop Mega Menu, Mobile Menu, Icon Menu and Mobile Mega Menu don’t have this field. If you want to adjust the expand arrow on each menu item, see Arrows, close button and open animation.

Choose how the submenu opens

Submenu Expand Style

Where it is: on the vertical step bar at the left, click Configure, then click the Submenu Expand Style button in the row of buttons above the Configure panel. This field chooses the way the level 2 submenu panel opens.

• Options: two cards with pictures, Default (edge-to-edge) and Dropdown. Default for new menus: Default.
• Applies to: only the Tab Bar and Floating Button, level 2. Every plan can use it, and Shopify, Wix and other websites work the same.
• Only selectable when the bar sits horizontally at the top or bottom of the screen (the reason is in “Why this field is faded” below).

Click one of the two cards with pictures. In the picture, the gray area is the screen, the white box is the submenu panel, and the gray dot is the item the shopper just tapped.

What shoppers see on your store when you change it:

• Default (edge-to-edge): the submenu panel sits right against the bar and spans the full width, with no arrow.
• Dropdown: a small gap sits between the bar and the panel, with an arrow in the gap pointing at the item the shopper tapped. The panel’s bottom border and drop shadow are removed to keep it clean. The panel opens downward if the bar is at the bottom of the screen, and upward if the bar is at the top.
• On phones, the Tab Bar’s panel is the same width as the bar. If the bar touches both screen edges, the panel is indented 16 px on each side so it doesn’t touch the edges. On computers, the panel keeps the width you set (the Submenu width field below), and only the arrow and gap are added.

To change the background color, the corner rounding or the spacing inside the submenu panel, see Style submenus.

Why this field is faded or shows a note below it

The arrow style only works when the Tab Bar sits horizontally at the top or bottom of the screen. If you place the Tab Bar vertically against the left or right edge, the two cards will be faded or show a note below:

• Only available when the bar is placed at the top or bottom of the screen. This menu is docked to the side. — The bar is vertical against the side edge on both phones and computers. The field is locked and can’t be selected.
• Not applied on mobile — the bar is docked to the side there. — The bar is vertical against the side edge on phones. The style you choose only takes effect on computers.
• Not applied on desktop — the bar is docked to the side there. — The bar is vertical against the side edge on computers. The style you choose only takes effect on phones.

The app only checks the devices where the menu is turned on. If you turn off Show menu on desktop, the app only checks the Tab Bar’s position on phones.

A Floating Button always sits at the bottom of the screen, so this field is never locked for it.

To change where the bar sits, see Menu position and margins. For the switch that turns the menu on or off per device, see Show the menu on mobile and desktop.

Adjust the submenu width on computers

Only the Tab Bar has the Submenu width (px) field. You’ll find it in the Display on desktop card, under For desktop only, in the Submenu (Level 2,3) section.

• Enter the width in px. The default is 360.
• This number only applies to computers. It doesn’t affect phones.

Summary

These two fields work exactly the same on Shopify, Wix and other websites.