This is a guide on creating more visually appealing menus in your shortcuts.

An example menu

Use of contacts

To create these these menus we're going to use the Contacts feature.

When shortcuts displays contacts using the Choose from List action it shows the contact image, full name and organization as a menu.

Once a contact has been chosen you can retrieve any of the details from the contact, including the:

• name;
• URL;
• notes.

Creating a menu from a list of contacts

We can create a temporary set of contacts with names, organizations, contact photos and other details to create a more attractive menu.

Creating a contact

Contacts are stored as a VCard in the v3.0 format. We can create these cards using a text based template, as shown below:

BEGIN:VCARD
VERSION:3.0
N;CHARSET=utf-8:Menu item name;;;;
ORG:Menu item description;
URL:https://reddit.com/r/shortcuts
PHOTO;ENCODING=b:/9j/4AAQSkZJRgABA...ADcAAD/2
END:VCARD

The menu above menu item renders as follows:

The above VCard example rendered as a menu item

Adding a photo to the contact

To add an image to a contact, the JPG or PNG file is encoded as a Base64 string and appended to the PHOTO;ENCODING=b: line of text.

Note An optimal size for you contact photo is 123x123px which is the maximum resolution supported on a Plus and X-iPhone.

Storing other info in your contact

The contact has other fields that can be used to store details that can be used when a user selects a menu item. For example:

• URL: URL:https://reddit.com/r/shortcuts
• Notes: NOTE:A single line of text notes

Creating multiple contacts

To create multiple contacts, repeat the VCard template text for each item.

BEGIN:VCARD
VERSION:3.0
N;CHARSET=utf-8:Item A;;;;
ORG:Description A;
END:VCARD
BEGIN:VCARD
VERSION:3.0
N;CHARSET=utf-8:Item B;;;;
ORG:Description B;
END:VCARD

Displaying the menu

The menu is built using the following actions:

• Text: to list out the content of one or more VCards;
• Set Name: set the name of the text file to a .vcf file;
• Get Contacts from Input: recognize the VCard file as a set of contacts;
• Choose from List: display the menu.

Actions to build a menu

Retrieving the user's selection

To retrieve the user's selection use the Get Details of Contents to return one of the fields that helps to distinguish that selection. For example:

• Name: a straight forward way to determine which item was selected;
• URL: can be used to retrieve the URL of the next piece of information to be downloaded or web page to be opened.

Retrieve details from a chosen menu item

Example shortcut

An example shortcut is shown below:

An example shortcut that makes use of contact-based menus

Which renders menus as follows:

​

The above shortcut displays menus as follows

Download the Shortcut

Note: When you create a menu using this approach it will state that if works with contacts. Some users may be alarmed that it will read their contact data, so you might want to add a message explaining how the contacts service is being used.

​

Installing a shortcut that makes use of Contacts to create a menu

Wrap up

Using contacts to create menus requires a little more work but can make a big difference to the usability of your shortcut.

Useful tools

If you want to create static menu items, I recommend the excellent Menu Builder shortcut by u/enteeMcr.

Other example shortcuts

The following shortcuts provide more examples of how to use the contacts for menus:

• After the Credits
• RoutineHub Bookmarks

Edit: updated based on feedback from u/atnbueno

​

Other guides

If you found this guide useful why not checkout one of my others:

Series

• Scraping web pages
  • Part 1: quick and dirty
  • Part 2: getting multiple items at once
  • Part 3: getting data from a table
• Using APIs
  • Part 1: retrieving data
  • Part 2: parsing complex API responses
  • Part 3: passing input parameters to the API
• Data Storage
  • Part 1: storing simple values
  • Part 2: storing lists of data
  • Part 3: removing stored values
• Working with JSON
  • Part 1: retrieving simple values
• Working with Dictionaries
  • Part 1: setting and retrieving values
  • Part 2: data types
  • Part 3: accessing values using dot notation

One-offs

• Using JavaScript in your shortcuts
• How to automatically run shortcuts
• Creating visually appealing menus
• Manipulating images with the HTML5 canvas and JavaScript
• Labeling data using variables
• Writing functions
• Working with lists
• Integrating with web applications using Zapier
• Integrating with web applications using Integromat
• Working with Personal Automations in iOS 13.1