# Blup Menu Bar

<figure><img src="/files/HD9I6GqaQIN7VgWjwWi4" alt="Blup Menu Bar"><figcaption><p>Blup Menu Bar</p></figcaption></figure>

## Menu Button

As soon as you click or hover on the menu button, a drop-down list pops up containing the following options:

1. File Button
2. Edit Button
3. View Button
4. Export Button
5. Import Button
6. Help Button
7. Account Settings Button
8. Blup Button

<figure><img src="/files/orETXOZ1eRi09rWQPnlA" alt="menu button"><figcaption><p>Menu Button</p></figcaption></figure>

Now, when click or hover on any of the 8 buttons, a right menu containing available options appears.

### File Button

When clicked on the File button, a menu with options for new, open, save as, and duplicate appears.

1. **New**: The users can create a new **Blup** project using this option. Once you click on the **New,** you will redirected to the **Create New Project** screen.
2. **Open**: This option helps you to open an existing **Blup** project from local storage.
3. **Save As**: This option helps you to save the current project as a Blup file and save it at your desired location.

<figure><img src="/files/gmNVkD1H1JV51RxRBCMj" alt="File Button"><figcaption><p>File Button</p></figcaption></figure>

### Edit Button

When clicked on the Edit button, a menu with options for undo, redo (Design), undo, redo (Logics), copy, paste, delete, copy page, paste page, delete page (Design), copy node, paste node, delete node (Logics), and select all appears.

1. **Undo (Design)**: This option undoes the changes in the BLUP designer.
2. **Redo (Design)**: This option redoes the changes in the BLUP designer.
3. **Undo (Logics)**: This option undoes the changes in the BLUP logic panel.
4. **Redo (Logics)**: This option redoes the changes in the BLUP logic panel.
5. **Copy (Design)**: It is used to copy the currently selected component in the BLUP designer.
6. **Paste (Design)**: It is used to paste the copied component in the BLUP designer at the current location.
7. **Delete (Design)**: It is used to delete the currently selected component in the BLUP designer.
8. **Copy Page (Design)**: It is used to copy the currently selected page in the BLUP designer.
9. **Paste Page (Design)**: It is used to paste the copied page in the BLUP designer.
10. **Delete Page (Design)**: It is used to delete the currently selected page in the BLUP designer.
11. **Copy Node (Logics)**: It is used to copy the currently selected node in the BLUP logics panel.
12. **Paste Node (Logics)**: It is used to paste the copied node in the BLUP logics panel.
13. **Delete Node (Logics)**: It is used to delete the currently selected node in the BLUP logics panel.
14. **Select All**: It is used to select all the components/nodes in a single click.

<figure><img src="/files/9b3bjxek0I6tHS4fAh0v" alt="Edit Button"><figcaption><p>Edit Button</p></figcaption></figure>

### View Button

When clicked on the View button, a menu with options for full screen, minimize screen, show/hide UI, zoom in/out/100% (Design), and zoom in/out/100% (Logics) appears.

1. **Full Screen**: It is used to enter Blup into full-screen mode.
2. **Minimize Screen**: It is used to minimize the app.
3. **Show/Hide UI**: It is used to toggle between showing or hiding the UI.
4. **Zoom In/Out/100% (Design)**: These options are used to zoom in, zoom out, or set the zoom to 100% in the Design.
5. **Zoom In/Out/100% (Logics)**: These options are used to zoom in, zoom out, or set the zoom to 100% in the Logics panel.

<figure><img src="/files/x44YgAwhNr0uAn9scECy" alt="View Button"><figcaption><p>View Button</p></figcaption></figure>

### Export Button

The Export Button in Blup creates a .blupx file, preserving project assets and configurations. It facilitates easy sharing and transfer of projects while maintaining integrity.

<figure><img src="/files/XWjFAPd2yLR2nc6jPy9u" alt="Export Button"><figcaption><p>Export Button</p></figcaption></figure>

### Import Button

When clicked on the Import from Figma button, it allows users to import their Figma files directly into Blup.

<figure><img src="/files/9E4JCnWCzxTdBFlznO8m" alt="Import Button"><figcaption><p>Import Button</p></figcaption></figure>

{% hint style="info" %}
You can import all your designs using [Import from Figma](/import-from-figma.md).
{% endhint %}

### Help Button

When clicked on the Help button, a menu with options for the Help Center, Keyboard Shortcuts, Video Tutorials, and Support appears.

1. **Help Center**: This option helps you to make the most of the exponentially growing Blup community. You can find answers to any problem that you are facing, or you can share what you are building with Blup and other thoughts on something you discovered about Blup. Blup prides itself on being a community-driven platform.
2. **Keyboard Shortcuts**: Opens a widget displaying keyboard shortcuts.
3. **Video Tutorials**: Plays all available videos on the Blup YouTube channel directly in the app.
4. **Support**: Facilitates collaboration with fellow Blup users on Discord.

<figure><img src="/files/bQog3GuPIwlEnPxoC4vf" alt="Help Button"><figcaption><p>Help Button</p></figcaption></figure>

### Account Settings Button

When clicked on the Account Settings button, a menu with options for Manage Account and Logout appears.

1. **Manage Account**: It opens the Account Details widget where the user can view and update their details.
2. **Logout**: It logs out the user from Blup.

<figure><img src="/files/dtC0uJdwhYghN2gXRenH" alt="Account Settings"><figcaption><p>Account Settings</p></figcaption></figure>

### Blup Button

When clicked on the Blup button, a menu with the option to Remove SDK Binaries appears.

1. **Remove SDK Binaries**: It removes all the SDK binaries installed within Blup, that you had installed when the app was run on a physical device through a USB cable.

   If you delete these components you will no longer be able to run apps for testing on your mobile phone via USB cable.

   To delete them click on Remove All SDKs and Binaries then a dialog box pops up at the center of the screen. Click on delete and you are done.
2. **Settings:** It opens the Settings widget where users can customize app settings, splash screen, Google Maps API key, and more.

<figure><img src="/files/NdngSMG5mLBvr32lfXly" alt="Blup Button"><figcaption><p>Blup Button</p></figcaption></figure>

## **New Page Button**

As the name suggests, the user can add new pages to their project using this button. By default, one page \[mobile canvas] will be present on the designer.

<figure><img src="/files/QMk6OpjTrJ3dCVY54Tey" alt="New Page Button"><figcaption><p>New Page Button</p></figcaption></figure>

## **Insert Button**

It opens the Insert widget which has pre-built Blup widgets and templates ready to go that can be directly used by the user to enhance the user experience.

<figure><img src="/files/mKxxZbSTr44adIaij4Y2" alt="Insert Button"><figcaption><p>Insert Button</p></figcaption></figure>

## **Import from Figma Button**

Import your[ Figma Designs ](#import-from-figma-button)directly in Blup.

<figure><img src="/files/RV5cSR1TYeKhQMiKOE3G" alt="Import from Figma"><figcaption><p>Import From Figma</p></figcaption></figure>

## **Developers Menu Button**

As soon as you click on the Dev menu button, a drop-down list pops up containing the following options:

### Edit Code

It allows the user to edit the code directly in the inbuilt code editor of BLUP.

### Download Code

This feature allows the user to download this project as a Flutter project.

{% hint style="info" %}
It allows users to edit that code and update it as a Flutter project.
{% endhint %}

<figure><img src="/files/yuztSIEHa8drAWLmxnTV" alt="Developers Menu"><figcaption><p>Developers Menu</p></figcaption></figure>

## **Analyzer Button**

This allows the users to view the warnings and errors in the app.

<figure><img src="/files/YIP1QeRzjZAFqFvgBCTo" alt="analyzer button"><figcaption><p>Analyzer Button</p></figcaption></figure>

{% hint style="info" %}
To enable the app to run or build successfully, it is essential to address all errors.
{% endhint %}

## **Run Button**

This functionality enables the user to run the app on their physical/virtual devices.

To run your app on a physical device you have to enable the developer option in your phone and also enable the USB debugging mode inside the settings of the phone.

If you are using or installed blup for the first time then first you have to download the required components that blup needs to run the app on your mobile phone via USB cable. To download these components hover over the run button, and a dialog box pops up having a download button, click on the download button to start downloading \[dialog box is only shown if the required components are not enabled].

If you have already installed the necessary components the button shows you a couple of options.

* Restart Button - This button restarts the app with all the new changes. You can use this button when you have made some changes in the logic that you have kept in the init state node.
* Hot Reload Button –This button hot reloads your apps instantly with all the new changes. This functionality is extremely fast and takes only a fraction of a second to reflect the changes

{% hint style="info" %}
Hot reload functionality works only after the app's build is run on the phone at least once.
{% endhint %}

* Stop button - this button helps you to stop the apps running on your phone instantly.

<figure><img src="/files/KFiLaznjo4JloAL7u3yb" alt="Run Button"><figcaption><p>Run Button</p></figcaption></figure>

## **Select Device Button**

Allows the user to switch between the available devices.

<figure><img src="/files/BjyXBJLkEpszid2GYqme" alt="select a device"><figcaption><p>select a device</p></figcaption></figure>

## **Publish Button**

It allows the user to publish the app.

Users can publish their apps in AppStore or PlayStore or generate web builds for deploying.

By clicking on it, It will show a dialog showing generate build for Android/iOS/Web.

We will get to the specifics of publishing the [app in publish-to-stores-ship](/wiki/publish-to-stores-ship.md).

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

## **Blup Docs Button**

This button opens the link to the Blup Documentation where users can get in-depth documentation about Blup and learn more about Blup.

<figure><img src="/files/3numJNkv67mzZmQ3dGtS" alt="Blup Docs"><figcaption><p>Blup Docs</p></figcaption></figure>

## **Learn Button**

This button opens the YouTube channel of Blup where users can view all the YouTube videos and learn more about Blup.

<figure><img src="/files/1c8du4e9Aub4fmDLTY4B" alt="learn button"><figcaption><p>Learn Button</p></figcaption></figure>

## Music to go with.

{% embed url="<https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM?si=2c7f55bd3f944878>" %}
Lofi music
{% endembed %}


---

# 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.blup.in/wiki/design-ui/blup-menu-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.