# Top Toolbar

The Top Toolbar contains all the controls for the Page Builder. In the image below, the Top Toolbar appears at the top of the page and has a solid line around it.

<figure><img src="/files/FFVX5hVutluXlOI2XQSF" alt="A screenshot showing the Appeggio editor, with the Top Toolbar highlighted."><figcaption><p>The Top Toolbar</p></figcaption></figure>

On this page, we'll go through each part of the top toolbar, from left to right.

## **Page Selector**

The Page Selector allows you to navigate between the pages in your app. When you open the dropdown, you'll see each page within your app. Selecting the page will open it in your canvas.

<figure><img src="/files/r18hhDbTiDTI31zpRreP" alt="A gif showing the Page Selector allowing you to navigate between the pages in your app."><figcaption><p>The Page Selector</p></figcaption></figure>

## **Device Size Selector**

The Device Size Selector lets you see how your app will look on multiple devices, including mobile phones, tablets, laptops, desktops, wide desktops, and 4K. By default, Appeggio generates fully responsive components and pages that will do the right thing based on the user's screen. This includes adapting the way some parts work, like the main menu, which will switch to a burger-menu style when viewed on a mobile phone.

The rightmost icon will always set the display size to best fit your device to view the Page Builder.

<figure><img src="/files/TMmnCs2MrDlv2mOsPpSH" alt="A screenshot of the device size selector within the Top Toolbar."><figcaption><p>The Device Size Selector</p></figcaption></figure>

## **Edit Menu**

The Edit Menu provides all the standard editing functions you would expect from a spreadsheet or word processor tool. Undo, Cut, Copy, Paste, Paste Special, Duplicate, and Delete, plus two additional functions: Move Left and Move Right. &#x20;

Move Left and Move Right are used to move a selected part within a group of parts, such as list items in a menu. If the group is horizontally aligned, the part will move one position left or right, but if the group is vertically aligned, the part will move one position up or down.

Most edit functions have a keyboard shortcut that keeps to generally accepted standards.

<figure><img src="/files/TIeJkT8rEJBEn2PEyCMV" alt="A screenshot highlighting the Edit Menu within the Top Toolbar."><figcaption><p>The Edit Menu</p></figcaption></figure>

## **Show and Hide the Data Repeat Navbar button**

The Show and Hide the Data Repeat Navbar button toggles on and off the Data Repeat Navbar associated with any parts on the screen that have been repeated based upon the contents of a database table.&#x20;

In the example below, the contents of the card row are from a database table. Clicking on the "Show/Hide data repeat" button adds a row about the data to show exactly which parts on the page are sourced from data.&#x20;

<figure><img src="/files/LFwBIIwl8Xf98MaxAM8m" alt="A gif showing the show/hide data button in the Top Toolbar. "><figcaption><p>Show and Hide Data That Repeats</p></figcaption></figure>

## **Role Selector**

The role selector allows you to display the page as it would be seen if a user with the selected role were logged in, quickly enabling you to test your app's behavior without leaving the Page Builder.

### **Using Roles and visibility**&#x20;

It is possible to restrict access to individual parts or pages of an app using Roles and the Visibility Property. This may be because you want to have restricted content behind a login, or restrict certain functions to an administrator role, etc.

There are six role types available in Appeggio.

1. Anonymous (Visitor)
2. Registered User
3. Administrator
4. Editor Administrator
5. Super Administrator
6. Owner Administrator

Level 1, Anonymous, has the least privileges, and every level above that can be given additional privileges.

Within the visibility settings, you can set parts, pages, functions, or processes to only be visible to a certain role type or all roles above or below a role type (inclusive).

For example, you would want a Registered user to still be able to see everything an anonymous user could see.

### Setting Page Visibility

When you create a new page, you can set the page visibility by role type, by default it will be Visitor (anonymous).

<figure><img src="/files/2H4Q82G9yGAjf3nIcwDl" alt="A screenshot showing the fields when setting up a new page within your Appeggio app."><figcaption><p>Setting Up Page Visibility</p></figcaption></figure>

## **Show menu**

The Show menu toggles optional items or components, like error messages, on and off, quickly allowing you to test your app's behavior without leaving the Page Builder.

<figure><img src="/files/onwQ0uEN1r8dtCBO8TnX" alt="A screenshot of the &#x27;Show&#x27; menu within the Top Toolbar."><figcaption><p>The 'Show' Menu</p></figcaption></figure>

## **Help, Save, and Publish**

The help, save, and publish buttons are located on the far right of the Top Toolbar.

<figure><img src="/files/dEI0qxxruutqsPqonkBS" alt="A screenshot of the help, save and publish buttons within the Top Toolbar."><figcaption><p>Help, Save and Publish Buttons</p></figcaption></figure>

### **Help Button**

The Help button will open the Appeggio help screens in a new browser tab.

### **Save Button**

Like many cloud-native applications, Appeggio automatically saves your work every three minutes, but clicking Save forces an immediate save to occur.

### **Publish Button**

The Publish button launches the Publishing Wizard, allowing you to publish your app to a custom domain <https://yourdomain.com>, the Apple iOS App Store, or the Android [Google Play Store](https://play.google.com/store/apps/developer?id=support@appeggio.com).


---

# 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://appeggiohelp.gitbook.io/appeggio-help/page-builder/top-toolbar.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.
