# WordPress bottom bar

### How to add a bottom bar to your WordPress app?

The bottom bar is a key navigation component for your app, allowing users to access important screens easily. Follow this guide to set up and customize your bottom bar:

{% embed url="<https://scribehow.com/shared/WooCommerce_bottom_bar__kFewxYhzQP2GEkBoPimUNw>" %}

**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 still used as the app’s home screen, even if the bottom bar is hidden.
{% endhint %}

**Step 2: Configure the Bottom Bar**

* **Add Items to the Bottom Bar**
  * Click on Add Item to include different options in your bottom bar. You can choose from the following:
    * Home: Sets the home screen of your app.
    * Product Categories: Opens the Product Categories screen of your app.
    * Post Categories: Opens the Post Categories screen of your app.
    * Cart: Opens the shopping cart of your app users.
    * Profile: Opens the Profile settings screen of your app users.
    * Settings: Opens the Settings screen of your app.
    * Web View: Opens a web view interface within your app. Simply enter the website URL of the page you want to render.

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

* **Set default bottom bar button**
  * Select one item as the default button for the bottom bar. This button will appear highlighted as the active screen and will appear when you first launch the app.&#x20;
* **Customize icon buttons**
  * Assign icons to each bottom bar item. You can upload custom icons or choose from the available icon library for a personalized look.

<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 3: Preview in Simulator**

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

**Step 4: Save Your Changes**

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


---

# 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/wordpress-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.