> For the complete documentation index, see [llms.txt](https://opusecom.gitbook.io/opus-mobile-builder/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://opusecom.gitbook.io/opus-mobile-builder/design-customize/publish-your-docs-1.md).

# Navigation Configuration

## Navigation Settings

Navigation defines how users move between different areas of your mobile app. A clear navigation structure improves usability and helps customers easily find products and content.

Navigation settings usually include:

* Header
* Side Menu
* Bottom Navigation Bar

***

### Header Configuration

The Header appears at the top of most screens in your app. It typically contains essential navigation and quick-access functions.

#### Common Header Elements

You may configure the following elements:

* App logo/ App name
* Cart icon

#### How to Configure Header

1. Go to App Design
2. Select Navigation
3. Open Header
4. Configure the available elements
5. Enable or disable specific icons
6. Save your settings

![](/files/ioTDI6FIOgqa2kwkPa0e)

#### Best Practices

* Keep the header simple and uncluttered
* Ensure icons are clear and easy to tap

***

### Side Menu

The Side Menu (also known as a drawer menu) provides access to additional pages and categories within your app.

It usually appears when users tap the menu icon in the header.

#### What You Can Add to the Side Menu

Common menu items include:

* Home
* Shop / Collections
* Orders
* Account
* Custom pages

#### How to Configure Side Menu

1. Go to App Design
2. Open Navigation
3. Select Side Menu
4. Add or remove menu items
5. Reorder menu items by priority
6. Save the configuration

![](/files/tbOTFevc3UtgYFeinCyW)

#### Best Practices

* Keep the menu structure simple
* Place the most important pages near the top
* Avoid adding too many navigation items

***

### Bottom Navigation Bar

The Bottom Navigation Bar is one of the most important navigation components in a mobile app. It allows users to quickly switch between key sections.

#### Typical Bottom Navigation Items

Most apps include between 3 and 5 navigation tabs, such as:

* Home
* Search
* Collection/ Products
* Notifications
* Account

Each tab usually contains:

* An icon
* A label

#### How to Configure Bottom Navigation

1. Go to App Design
2. Select Navigation
3. Open Bottom Bar
4. Add or edit navigation tabs
5. Assign each tab to navigate to a specific screen or product.
6. Customize the icon and label
7. Save the configuration

![](/files/C5OghBklribrzPFdUdlY)

#### Best Practices

* Limit the bottom bar to 3–5 tabs
* Use clear icons and short labels
* Keep the most important features easily accessible
* Maintain consistent icon styles

***

## Preview Your Navigation

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.

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://opusecom.gitbook.io/opus-mobile-builder/design-customize/publish-your-docs-1.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
