# Web-to-app bottom bar

### How to add a bottom bar to your Web-to-app?

The bottom bar in your Web to App is a crucial navigation element that enhances usability and accessibility for your app users. Follow this guide to configure or manage your bottom bar:

{% embed url="<https://scribehow.com/shared/Web-to-app_bottom_bar__h-ltfyHlR5idAeObAxFTyw>" %}

**Step 1: Enable the Bottom Bar**

* Log in to your [AppMySite dashboard](https://app.appmysite.com/app/bottom-bar).
* Navigate to the **Bottom Bar** section.
* Toggle **Enable Bottom Bar** to activate the bottom bar functionality.

{% hint style="warning" %}
The bottom bar’s default item is used to set the app’s home screen, even if the bottom bar is hidden.
{% endhint %}

**Step 2: Add Items to the Bottom Bar**

Click on **Add Item** to customize your bottom bar. You can include the following options:

* Menu: Adds a hamburger menu to your bottom bar. This menu allows app users to quickly navigate through your app’s features.
* Settings: Opens the Settings screen of your app.
* Web View: Opens a web view interface within your app. Customize this option by:
  * Entering the website URL of the page you want to display.
  * Enabling or disabling the app header, website header, or website footer.
  * Hiding specific webpage elements by entering their HTML class or HTML ID in the Web View settings.

**Step 3: Customise icons buttons**

* Assign icons to each item in your bottom bar.
  * You can upload custom icons for a personalized look.
  * Alternatively, select icons from the available icon library.
* Adjust the icons to match your app's design and functionality requirements.

<figure><img src="/files/KIykviwCmTyYY68HwRM0" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}

* Duplicate: Quickly copy an existing item by clicking the duplicate icon.
* Delete: Remove an item from the bottom bar by clicking the delete icon.
* Re-arrange: Drag and drop items to change their order on the bottom bar.
  {% endhint %}

**Step 5: Preview in Simulator**

* Use the Simulator on the Bottom Bar screen to preview how the bottom bar will look and function in your app.
* Adjust the settings as needed based on the preview.

**Step 6: Save Your Changes**

Once satisfied with your bottom bar configuration, click **Save** to finalize your settings.

{% hint style="success" %}
[Follow this guide](/app/web-view/advanced-web-view-settings.md) to customize web-views in your app using advanced Web View settings.
{% endhint %}


---

# Agent Instructions: 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:

```
GET https://docs.appmysite.com/app/navigation/bottom-bar/web-to-app-bottom-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.