Multi-Level Menu

Updated 21 days ago

The Multi-Level Menu helps users browse your app through a structured side navigation, organizing categories, collections, and pages into clear menu levels.

Use this section when your app includes:

  • multiple categories or collections

  • subcategories within collections

  • several pages users may need to access quickly

Under the “Settings” tab,

Menu 

This is the primary navigation level visible to users.

Text Style:

You can customize:

  • Font – Choose a font that matches your brand

  • Size/Weight – Adjust how bold or subtle the text appears

  • Line Height – Control spacing between lines

  • Letter Spacing – Fine tune spacing between characters

  • Text Color – Choose a readable color

  • Alignment – Position the text

  • Decoration – Add styling like underline if needed

 Icons (Left & Right):

  • Choose or Upload Icon – Add icons for better visual clarity

  • Icon Color – Customize the icon color

Sub Menu

This is the second level of navigation, usually shown when a main menu item is expanded.

Image Attributes:

  • Height/Width – Set the size of the image

  • Radius – Adjust corner roundness

  • Image Scale – Choose whether the image fills or fits the container

Image Border:

  • Color – Choose border color

  • Width – Adjust thickness

Text Style:

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Decoration

Sub Item

This is the third level of navigation under the sub menu.

Text Style:

You can customize:

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Decoration

Background and Spacing

This controls the layout of the entire side navigation.

Background:

  • Color – Set the section background color

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the menu

  • Margin – Manage spacing outside the section

  • Relation – Define spacing between elements

Border:

  • Color – Choose border color

  • Width – Adjust thickness

  • Sides – Select which sides should display the border

Under the “Content” tab

In the content tab, you can create and manage your side navigation menu items. This is where you define how users will navigate through different sections of your app.

Add Menu Item (Action)

For each menu item, you can configure the following:

  • Name – Add the label that will be displayed in the menu

  • Select Target Page – Choose where users should be redirected when they tap on the item

Sub Menu Controls

You can further organize your navigation using sub-menus.

  • Enable or Disable Sub Menu – Show or hide sub-level navigation

  • Add Sub Menu – Create additional nested items under a main menu

  • Delete – Remove menu items or sub-menus that are no longer needed

Benefits:

  • Makes app navigation more organized and intuitive

  • Reduces friction for stores with larger catalogs

  • Supports a cleaner overall app layout

  • Enables better menu hierarchy and content organization

  • Helps highlight priority categories and guide user behavior

Related Articles

Announcement bar

1 min read

Button

2 min read

Image Block

1 min read

Image Banner

1 min read