# Custom app bottom bar

### What can be added to the bottom bar of your custom app?

The bottom bar in your Custom App is a vital navigation element that allows users to seamlessly navigate through your app. Follow this guide to configure or manage your bottom bar:

{% embed url="<https://scribehow.com/shared/Custom_app_bottom_bar__cpUrG-pRQyS1ehe7Fg-eoA>" %}

**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 provides quick access to various sections of your app.
* 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.
* Pages: Displays any content from your app’s pages. Standard pages may include Home, About, or Contact pages.
* Post: Displays all posts in your app. Posts are time-stamped articles, and the most recent posts appear first.
* Post Categories: Opens a screen showing all post categories. You can choose a template to style the appearance of categories in your app.
* Post Tags: Adds a tag screen for your posts, allowing users to find posts based on the tags you assign to them.
* Menu - Select to add a hamburger menu in your bottom bar. A menu provides quick access for your app users to navigate through the app.
* Settings -Opens the Settings screen of your app.&#x20;
* Web view -Opens a web view interface within your app. If you choose this option, you can enter the website URL of the page you wish to render.&#x20;

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

* Pages -Display any content on pages. Examples of standard pages include Home, About, and Contact pages.
* Post -Displays all posts on your bottom bar. A post is a time-stamped article organized through categories and tags. Most recent posts will appear first.
* Post Categories -This opens the screen that displays all your posts' categories. You can choose a template to style the appearance of categories in your app.
* Post tags -Choose to add the tag screen for your posts. This allows users to find your posts based on the tags you assign to them.&#x20;

**Step 3: Customise icon 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.
* Ensure the icons align with your app’s design and navigation needs.

<figure><img src="https://3330324049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxUo90vXzDtbgOtaUaLYv%2Fuploads%2FENJrjcFwbQ5tp22iR0BY%2FScreenshot%202025-02-06%20at%203.57.51%E2%80%AFPM.png?alt=media&#x26;token=95c3e7a1-b0fb-460e-a9f6-13c9c1824d28" 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.