Navigation Configuration

Navigation controls how customers move between key areas of your mobile app.

Ego Mobile Builder lets you configure three main navigation areas:

• Header — quick actions at the top of the app.

• Side Menu — a larger menu for additional pages and destinations.

• Bottom Bar — quick access to the most important app screens.

A clear navigation structure helps customers find products, content, their account, and other important features more easily

The Header appears at the top of your app and provides quick access to important actions.

To configure it:

1. Go to App Design → Navigation.

2. Select Header.

3. Configure the header appearance and actions.

4. Review the result in the preview.

Set up a transparent header

Enable Transparent header when you want the header to blend into the content behind it.

Choose a transparent mode:

Only on scroll down
The header becomes transparent based on the customer's scrolling behavior.

Always transparent
The header remains transparent.

You can also adjust Dimming to control how much the content behind the header is darkened.

Customize the header overlay

Use Overlay to improve the visibility of icons and text over the content behind the header.

Choose:

• Solid for a single-color overlay.

• Gradient for a gradual transition between colors.

For a gradient, you can customize:

• Direction

• Color 1

• Color 2

• Overlay opacity

Use the app preview to make sure your header remains readable over different banners and images.

Configure Header Actions

Under Header Actions, choose which shortcuts appear in the header.

Available actions may include:

• Side Menu

• Logo & Store Name

• Navigation

• Multi-language

• Cart

You can:

• Drag actions to change their order.

• Use the eye icon to show or hide an action.

• Remove actions that are not needed.

• Configure each action individually.

A maximum of 5 actions can be displayed in the mobile header at the same time.

Keep only the actions customers need most often. Too many header actions can make the interface harder to scan.

The Side Menu gives customers access to additional pages, features, and grouped navigation items.

It supports multi-level menus, so you can organize related destinations under a parent menu instead of displaying every item at the same level.

For example:

• Loyalty

  • Rewards & Loyalty

  • Earn Points

  • Redeem Rewards

  • My Rewards

  • Refer a Friend

  • VIP Status

Add and organize menu items

Under Menu Items, you can:

• Click Add more to add a new menu item.

• Drag items to reorder them.

• Add child items under a parent item to create a multi-level menu.

• Expand or collapse parent menus.

• Delete items you no longer need.

Use parent menus to group related destinations and keep the Side Menu easier to scan.

Configure each menu item

Select a menu item to configure:

• Icon

• Icon size

• Label

• Navigation destination

Available navigation types include:

• None

• Product

• Collection

• URL

• Screen

For a parent menu, you can use it mainly as a group for its child items, while each child item can link to its own destination.

Recommended practices

Use the Side Menu for secondary navigation or larger groups of related pages.

Keep labels short and clear, and group related items under a parent menu when needed.

Avoid creating an overly complex hierarchy that makes customers open too many levels before reaching their destination.

The Bottom Bar provides persistent access to the most important parts of your app.

Most mobile apps use it for destinations customers visit frequently, such as Home, Products, Notifications, or Account.

To configure it:

1. Go to App Design → Navigation.

2. Select Bottom Bar.

3. Choose a layout style.

4. Add and configure menu items.

5. Review the result in the app preview.

Choose a Bottom Bar layout

Under Layout Style, select how the Bottom Bar should appear.

Available styles include:

Default
A standard bottom navigation layout.

Glass Full
A full-width glass-style navigation bar.

Floating Capsule
A compact floating navigation bar separated from the bottom edge.

Choose the style that best fits your app design and branding.

Add and organize Bottom Bar items

Under Menu Items, you can:

• Drag items to reorder them.

• Delete items.

• Click Add more to create additional items.

For each item, configure:

• Icon

• Icon size

• Label

• Navigation destination

Keep the most frequently used destinations in the Bottom Bar.

Choose a navigation destination

Each Bottom Bar item can navigate to:

• None

• Product

• Collection

• URL

• Screen

For example:

• Home → Home screen

• Products → Product or collection screen

• Notifications → Notifications screen

• My Account → Account screen

Use an item as Chat

Enable Use as Chat when the Bottom Bar item should open your configured customer chat experience instead of a standard destination.

Complete the related chat configuration before enabling this option.

Open a screen when the app launches

Enable Open on Launch when you want the selected destination to be the first screen customers see when they open the app.

Use this option carefully and select a destination that makes sense as the starting point of the customer journey.

After updating navigation settings:

1. Open Ego Live Preview
2. Test the app flow
3. Check how the navigation works
4. Confirm typography readability
5. Verify splash screen appearance

This helps ensure your design and navigation work smoothly before submitting your app.

1. What navigation areas can I customize?
You can customize the Header, Side Menu, and Bottom Navigation Bar of your mobile app.

2. Can I hide icons from the Header?
Yes. You can enable or disable supported Header elements based on your app’s navigation needs.

3. Can I change the order of items in the Side Menu?
Yes. You can add, remove, and reorder menu items to prioritize the most important destinations.

4. Can I create a three-level Side Menu?
Yes. You can organize supported menu items into up to three levels, creating a clear hierarchy with parent categories, subcategories, and nested items.

5. How many items should I add to the Bottom Navigation Bar?
We recommend using 3–5 tabs so key destinations remain easy to access.

6. Where can a Bottom Navigation tab redirect users?
Each tab can be configured to navigate users to a supported destination, such as a specific screen, product listing, product detail page, or other available app page. This allows you to place frequently used areas—such as Home, Categories, Search, Cart, or Account—within easy reach from the Bottom Navigation Bar.

7. How can I test my navigation before publishing?
Use Ego Live Preview to test the navigation flow and make sure each menu item leads to the correct destination.