Add an app menu entry in Experience Builder
In this article, you learn how to add a new app menu entry to the menu of your app with the Experience Builder. You will upload a menu icon and add a new menu entry which is leading e.g. to your website.
- Target URL of your app menu entry, e.g. the URL of your website
- Defined title for the new app menu
- PNG image with 120x120 pixel dimensions and with the file name: <iconname>@3x.png
- PNG image with 80x80 pixel dimensions and with the file name: <iconname>@2x.png
- PNG image with 40x40 pixel dimensions and with the file name: <iconname>.png
1. Go to Experience Builder, choose your app from the list and click on it.
2. Click on 'Pull from preview'
3. Click on 'menuicons'
4. Click on 'Actions'
5. Click on 'Upload files'
6. Choose the three menu icon PNGs from your desktop, e.g. 'website.png', 'firstname.lastname@example.org' and 'website@3xpng' and upload them via the file upload menu
7. Click on 'default'
8. Click on 'app_menu.xml'
9. Mark the last paragraph, e.g.
<navigationNode targetURL="purple://app/resource/dynamic/info/index.html"> <title>Info/Contact</title> <iconURL>menuicons/legal.png</iconURL> </navigationNode>
10. Copy and paste it below the last paragraph
11. Go to 'targetURL' and overwrite the orange URL in quotation marks with your desired target URL for the app menu entry, e.g. a URL to an external website such as https://sprylab.com/en/
12. Go to 'title', mark the white text and overwrite it with the desired title of your new app menu entry, e.g. 'Website'
13. Go to 'iconURL', mark the white text and overwrite it with the name of your recently uploaded (smallest) menu icon, e.g. 'website.png'
14. Click on the burger menu
15. Click on 'Update Dynamic Resources'
16. Name your changes, e.g. 'configured-menu'
17. Click on 'Merge all files to preview'
You have successfully added a new menu entry to your app menu, merged the changes and updated the dynamic resources. You can test the result in the preview and push them live if they look fine, to make them visible in your live app.